chrome下rem单位与12px问题

2019年05月28日Web前端0

rem在适配多屏的时候还是非常有用的，当与chrome下的最小12px字体相遇时，会发生什么问题呢？

rem

简单介绍下rem单位的使用，rem只支持ie9及以上的浏览器。r指的是root，即根节点，em则是指的常见的em单位，连起来就是，rem是相对于根节点font-size倍数的大小。 例如：

html {
    font-size: 10px;
}
span {
    font-size: 1.6rem;
}

给根节点设置了10px，span设置了1.6rem，则span大小为1.6 * 10 = 16px。

样式计算的结果也是如此。

正是因为这样的一个原因，在适配不同分辨率屏时，我们只需设置根节点的font-size就可以改变页面上元素的大小。比如1080p兼容4k时，只需要将root的font-size变成两倍，这用media query很容易就能实现，但是却完成了对页面的兼容。

注：非倍数关系的分辨率兼容直接改可能会存在一些问题。

12px

当我们使用小于12px的字体时，chrome只会渲染12px大小的字（当然有法子处理这个问题，但不是这的重点）。既然rem最终都是转化成px的，那么使用它去设置宽高也是同样可以的。

div {
    font-size: 1rem;
    width: 10rem;
    height: 10rem;
}
<div>宽高渲染则时以最小12px为准</div>

但实际效果并不是我们想象的100*100，实际显示div为120*120，至于原因则是，其他元素的font-size中的rem是基于root中设置的font-size计算的，而宽高的rem是按照root中字体最小限制去计算的（12px）,所以出现了此问题。

小插曲

demo是在公司电脑上测试的，回家后使用时，发现了与公司内完全相反的效果，显示了100*100的宽度（chrome版本一致）。 从控制台可以看出，

html上的字体实际是10px，那么10rem就是10*10=100px，也就不奇怪了。还有一点能证明的是，该div的font-size是1rem，chrome渲染了10px的字体，本人以为是win7和win10的问题，尝试多台测试，结果如下：

  • win7测试三台，两台是120*120，一台100*100。
  • win10测试三台，两台是100*100，一台是120*120。

这似乎与系统没有太大的关系，可能是浏览器的设置问题，最终发现最新的chrome支持最小字体的设置了，在设置-自定义字体里就有：

通用解决方案

前面的问题出在了，root节点的font-size是否是遵循最小12px。故我们将font-size设置的足够大的话，就能避免这个问题。同时为了方便计算，则选择100px为root的font-size。

html {
    font-size: 100px;
}
span {
    font-size: 0.16rem;
}
div {
    font-size: 0.16rem;
    width: 1rem;
    height: 1rem;
}
<body>
    <span>字体能够渲染正确</span>
    <div>宽高渲染则时以最小12px为准</div>
</body>

这样的话，一不会有兼容性的问题，二不会遇到最小12px的问题。

详细demo见：github。

CSS

目录