点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

在上篇H5-（px、em、rem）那些必须搞懂的问题，我详细阐述了三个单位（px、em、rem）的区别及使用规则，大概是这样的：

01、px：像素是相对于显示器屏幕分辨率而言的相对长度单位。PC端我们可以认为1px就是1物理像素（屏幕100%时候），但是，由于在移动端，因为手机分辨率的各类颇多，不可能一个个去适配，这时px就显得非常无力了，所以我们就考虑使用em和rem。

02、em：从概念上来看，这个单位是继承父级的，假设html元素上我们设置了字体大小为16px。一级子元素p的字体大小我们设置了1em，也就是1*16=16px。在往下一级span元素，我们设置它的字体大小2em，这个时候的基准大小相对它的元素。即（1em=16px），也就是2*16=32px。以上就是继承了父级的值。这个嵌套一旦多了，就无助了，所以rem出现了。

03、rem：CSS3新增的一个相对单位（root em，相对根元素），只会相对html元素的值，不会受父级的影响。相对于em单位的好处是：单位计算方便点。

以上就是上一篇我们写的内容，这一篇我们来写如何正确在项目（主要是移动H5页面适配）中应用rem。

一、需要知道的一点：

不是所有的浏览器都默认字体大小16px，也千万不要认为是这样，然后按这个前提去开发（况且这个值也是可以自己设置的）。

二、怎么正确应用：

基于上在这一点的不确定性，我们给出解决办法。

因为rem是相对html的，那么只要将html选择器设置一个绝对大小的值，比如在html选择器设置font-size：20px，那么1rem=20px（这里由于chrome的最小字体是12px，虽然当1rem=10px时，10的倍数容易计算，但这个数据是无效的，因此向上取大整数，所以选择20px比较恰当）。要兼容手机各个分别率，使用媒体查询media可以设置不同的大小，这样在常规的设备中都可以精准到每一个像素。

下面给一个640px屏幕和html的font-size：20px的适配代码：（各种尺寸屏幕根据比例计算得到html的font-size）

在开发H5的时候，可以用px布局，然后通过一些线上或线下工具将其转换成rem单位值（以适配代码为基准）。

三、写在最后的总结：

现在我们知道了怎么在一个H5开发中正确使用rem单位来做适配。那，是不是说rem就是最好移动适配方案了呢？其实rem也有缺陷，当然也不是最好的移动页面适配解决方案，详情听我下回来写。

夜色已晚，以上如有写的不对的地方，欢迎留言指正。