关于使用rem的注意事项

此文是参阅杜瑶大神的博客 https://github.com/doyoe/trip#user-content-active

1.Chrome及后来加入Webkit阵营的Opera都不支持页面字号小于12px，如果希望你的程序足够安全，尽量不要定义小于12px的字号

2.chrome中body使用rem失效

问题：在 Chrome 和 Opera 上，如果我们给 body 元素应用了 rem，取值将会计算错误。

代码如下：

html {
  font-size: 62.5%;
}
body {
  font-size: 1.4rem;
}

大部分：
大部分浏览器的默认字号都是 16px，所以 html 的字号计算出来应该是 16px * 62.5% = 10px。此时，我们预期 body的 font-size 为 14px
然而实际情况与我们想象的不太一样，最终 body 的计算值并不是 14px，它忽略了 html 的定义，而是直接使用了浏览器的默认字号作为参照。于是最终计算值为：16px * 1.4rem = 22.4px。测至 
chrome 45.0 和Opera 33.0 仍然存在这个问题，不过 chrome 49.0 和 Opera 37.0 看起来已经被修复了。

为了有效的绕过这个问题，并且实现相同的效果，我们可以将代码修改如下：

html {
  font-size: 62.5%;
}
body {
  font-size: 1.4em;
}

由于 body 是 html 的直接子元素，所以此时对 body 使用 em 与 rem 的效果是相同的。

em是参照父元素进行换算的~~

不要对html设置百分比字号

很严肃的和大家说，如果你在使用 rem 这项技术，那么尽可能不要对html设置百分比大小的字号。比如这样的：

html {
  font-size: 62.5%;
}

由于大部分浏览器的默认字号是 16px，所以能计算出 html 的字号实际为 10px。因为部分浏览器会将小于 12px 的字变成 12px 来显示。那么此时，在这些浏览器下，如果我做了这样的定义：

.demo {
	 10rem;
}

你预期得到16*62.5 = 10px; 10px * 10rem = 100px，但实际上得到的确是16*62.5 = 10px;因为10px小于12px，会默认使用12px来替换10px。所以变成  12px * 10rem = 120px。这是非常大的错误，我们应当尽量避免。

与此同时，虽然大部分浏览器的默认字号是 16px，但仍然有使用其它默认值的浏览器，比如我依稀记得 firefox 使用了15px。而且最重要的是，用户是可以改变浏览器默认字号的，所以你认为的可能并不是你认为的。

所以不要对html设置百分比字号，尤其是不要对它使用计算值比 12px 小的字号。我推荐大家这样做：

html {
  font-size: 100px;
}

以 100px 作为因子，计算也非常方便。如果你想要设置一个元素的宽度是 20px，那么只需要：

.demo {
	 .2rem;
}