css3中rem详解

rem：是一个相对单位，相对根元素字体大小的单位，再直白点就是相对于html元素字体大小的单位。

优点：这样在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算，根本就离不开计算器。

刚刚做完一个移动端的项目有一些使用的小收获在这里分享一下，也许大家已用过。如果有欠妥的地方，欢迎讨论。

html的字体大小设置为font-size:62.5%原因：浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，10/16=0.625=62.5%，为了子元素相关尺寸计算方便，这样写最合适不过了。只要将设计稿中量到的px尺寸除以10就得到了相应的rem尺寸，方便极了。当然，直接将html元素设置为10px，也是可以的。只是习惯了62.5%。找了个参考图，方便参考。如下：

说说项目中遇到的问题吧。

按照习惯写法，代码如下：

html { font-size:62.5%; }
.menu{ width:100%; height:8.8rem; background:#000; line-height:8.8rem;color:#fff;font-size:3.2rem; text-align:center; }

调试工具：chrome

效果图尺寸如下：

高度不应该是88吗，为什么大了那么多，chrome在字体小于12px时都当12px 处理，这个坑呀。8.8*10=88,8.8*x=105.59，计算结果x=11.999，浏览器计算会存在误差，正好不就12px嘛。

绕过这个坑，直接将html字体大小设置为625%，即100px。再看下效果。

可爱的88回来了，绕过了chrome的12px死穴。

设备适配：

很简单的哟，这个项目设计稿是640，就直接将640作为参考，html字体设置为625%。88px就可以直接换算为.88rem；适配其他尺寸的设备，比如：320，88px的元素应该是44px，要是直接计算元素的尺寸，那引入rem无任何意义了，直接用媒体查询，将html字体尺寸设置为312.5%即可，元素的尺寸只用写一套。一套设计稿，适配n多尺寸的设备，要多爽有多爽。计算方法：320/640*625%=312.5%，其他尺寸的直接将320换为对应的尺寸即可。