【移动端适配】为什么根元素font-size设置成100px或625%？

清疚 2022-05-21 00:05 81阅读 0赞

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

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

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

**但是为什么一般多是 html\{font-size:62.5%;\} 而不是 html\{font-size:10px;\}呢？**

因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 \* 62.5% 得到我们需要的10px。

实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。

找了个参考图，方便参考。如下：

![70][]

然鹅，这里有个坑，在大部分现代浏览器都没有问题，但是，谷歌font-size:62.5%刚好是10像素，而谷歌是不支持小于12像素的字体的，所以，谷歌无形当中将所有的rem全部变大了。这下麻烦了，所有的地方都错位了。chrome在字体小于12px时都当12px 处理，也就是设置62.5%相当于设置成了75.0%。但是在除的时候又是除的10得到rem值，那么当然错位。

针对这个现象，可以尝试设置html字体为625%，即100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

设备适配：详情参考【[移动端适配方案1][1]】【[移动端适配方案][Link 1]2】

[70]: /images/20220521/8bdfc00848e44387b8d03b7fb96ff296.png
[1]: https://blog.csdn.net/tcf_jingfeng/article/details/80803083
[Link 1]: https://blog.csdn.net/tcf_jingfeng/article/details/80814015