今天同事找我帮忙debug一个rem布局问题，发现一个之前没注意的现象，现在分享在这里。
现象
rem布局是依赖根元素<html>的font-size属性的值实现的，在谷歌浏览器中，这个值是有最小值的情况的，比如以下布局：
html {
font-size: 10px;
}
section {
height: 10rem;
font-size: 1rem;
}
// 在谷歌浏览器中渲染出来的属性是这样的：
height:130px;
font-size:13px;
但是此时把布局改掉，结果会是这样：
html {
font-size: 10px;
}
section {
height: 10rem;
font-size: 1.5rem;
}
// 注意font-size的值：
height:130px;
font-size:15px;
结论
我找到资料说是谷歌给中文字体的font-size设定了最小值，有说法是12px，我在 Chrome 70.0.3538.67 测出的是13px，一旦小于这个大小，谷歌浏览器会把字体大小强制设置为最小值 —— 13px。
根据我的实验，使用rem布局，对于font-size的值：
- 当
<html>不大于13px时:
- 子孙元素的
font-size经过计算如果不大于13px，则强制设置为13px; - 子孙元素的
font-size经过计算如果大于13px，则按照根元素的font-size实际值进行计算；
例如，
<html>的font-size等于10px，font-size:1rem计算为font-size:13px;而font-size:2rem计算为font-size:20px；
- 当
<html>大于13px时:均按照实际值进行计算。
注：对于其他 css属性未发现如上现象
网友评论