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

2.chrome中body使用rem失效

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

代码如下:

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 {
	width: 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 {
	width: .2rem;
}