移动端开发流行单位rem的几点看法

前言

rem单位在移动端前端开发很流行，今年我参加上海8月8号的CSS Conf 大会,好几个老师都提过了！其实我们公司很早也就用rem单位了，关于css的单位，大家请看http://www.haorooms.com/post/css_unit_calc

rem的看法

rem单位确实好处蛮多的，它是相对于根节点，让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小。但是，你用过了就知道，它会出现一个问题：

用Chrome浏览器打开你做的网站的时候，有时候会出现字体很大的情况。但是刷新一下页面就好了。

之所以会出现这种情况，原因是因为我们为了计算方便，将原本默认1rem=16px修改1rem=10px。因此，我们在html中通常做了如下设置：

html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%    1rem = 10px   **/}  

但是呢，Chrome浏览器有时候会忽略了html的设置。于是在初始化页面的时候，出现了上面字体过大的情况，本来1.6rem应该渲染成16px的字体，却被渲染成了16*1.6=25.6px大小了。

问题解决

你仔细研究会发现，出现字体过大的“元素”，通常是没有设置font-size的，元素的font-size是继承根目录的，因此，字体会变大。

因此，最佳的一种解决方案是：

在你要展现的文字父级或者其本身设置font-size

第二种解决方案：

我们在页面中添加style样式，给body设置font-size

例如把下面的代码放到 head 里面：

<style>  
        body {  
            font-size: 1.2rem;  
        }
</style>  

期待更优方案

上面是我解决rem字体过大的方案，不知道大家有没有更加好的方案来解决这个问题。