你大声的嚷着你的手机分辨率就是1920*1080的，这是你攒了足足两个月的钱后在小米官网买的红米手机，绝不可能有假。 你写了一个宽为 960px 的 div，用手机的浏览器横屏打开后，你期望这个该死的 div 会和在电脑上的浏览器加载出来一样的效果，只占屏幕的一半。结果却让你纳了血闷，明明电脑上分辨率和手机分辨率都是1920*1080，为何电脑上 960px 正好占一半，手机上却占了一大半，几乎占满了你手机的整个屏幕的宽。

然后你去问了前端大神这是怎么回事，大神欲言又止，看起来并不太想仔细的给你解释，可能是不太好一两句话说清楚，他让你去用代码查看浏览器实际的宽度，说是一看便知：

运行结果： clientWidth:1280， width:1280 clientHeight:720， height:720 看完你也明白了，浏览器分辨率是 1280*720 的，原来浏览器的分辨率和手机设备实际分辨率不一样啊！ 上面的两个宽度，可以理解成一个是浏览器非最大化时的宽度，随着用户拖动边框大小会跟着变动，另一个是浏览器最大化时的宽度，不会变。

UI 设计师给你的图是 1920*1080 尺寸的，本来图上某个块是 100px*100px，你代码里就可以直接写宽 100px，高100px，但是现在这个网页要放到手机上加载，按你刚才得出的这个分辨率比例，你全得除以1.5 写成宽 66.66px。 等等，先不要忙着改了，因为实际上你并不能这么做，因为你的手机浏览器分辨率是 1280*720的，别人的手机可不一定，例如 iphone4 的屏幕分辨率是 960*640，浏览器的分辨率是 480*320 的，你不仅得按1920*1080的设计图来适配 1280*720的浏览器分辨率，还要适配 480*320 的分辨率，所以你需要准备多套比例来适配。

首先要搞清 em 和 rem 的区别： em 单位是参照元素自身文字大小来设置尺寸，例如一个 p 标签的 font-size是 20px，1em就等于20px，这时如果想设置两个字的缩进，就可以设置text-indent为2em； rem 是参照根节点 html 标签的文字大小来设置尺寸，其它元素相关尺寸都用 rem，所有元素就都有了统一参照标准，改变 html 文字大小，就会改变所有用 rem 单位设置的尺寸。 计算方式： 例如设计图是 720*1280 的尺寸，这时为了容易把 px 转换到 rem 单位，建议把 html 标签的 font-size 设置成100px，意思就是在 720*1280 尺寸上，1rem=100px，这样一来，UI给的是什么尺寸的图，就按什么尺寸的来开发，图上量的是100px，就写1rem，量的是234px就写2.34rem。 为什么不设置成1px？不是更好换算吗？ 因为前端规定 font-size 属性最小值是12px，不能设置1，也不能设置10，所以有人设置成20px，实际设置成12px以上都没问题，例如设置成20px时，设计图上量的是100px，代码中要写100/20=5rem。

N为随便定的基准分辨率的放大倍数 1rem*N=设计图实际大小 A/750*N = 40 480分辨率的font-size为 480/750*40=25.6px 如果最低想支持到480字体准确，即最低的12px，就是480/750*N=12px，计算结果N = 18.75，就意味着想要在480的分辨率上显示出来12px的字体，750这个基准分辨率的放大倍数最低只能设置为18.75倍。 m/18.75*12 = 12，在基准设计图上最低只能设计18.75px的字体，才能保证在最低支持的480宽的分辨率上能正确显示出12px的字体，如果设计图上的字体小于18.75，换算到480上会小于12px，并被强制写成12px，导致不准确。

注意，max-width:480意思是小于480时用这条style，相当于：

max-width方式时，要把小的值放下面，如果把 320 这条写到了480上面，浏览器分辨率是200，那么先判断符合320，再判断是否小于480又符合，320 的就会被 480 覆盖，导致 html 的 font-size被设置成了480的比例。min-width反之。 所以按上面这种配置，当浏览器分辨率宽度为730px时，html 的 font-size 就是38.4px，因为 730px 大于640px，小于750px，所以被适配到 720px这一档。

另外，有插件可以自动把px转成rem，喜欢用插件的可以下载个插件。