问题场景：

设置html { font-size: 1px; }，使 1rem = 1px

document.documentElement.style.fontSize = "1px";

结果：rem设置未生效，每个元素都比预想的要大很多。

问题产生原因

各大浏览器的最小字体限制不同

• google为6px
• firefox、Edge、IE（5 7 8 9 10）
• Safari为0px
• Opera、搜狗浏览器、360浏览器、为12px等

有关更多浏览器最小字体与默认字体信息请移步：各大浏览器的最小字体与默认字体 (opens new window)

如果低于html的font-size值低于12px，那么在页面中使用rem时，用搜狗浏览器、360浏览器（Opera除外）等浏览器打开时，浏览器会默认html的font-size：12px，就会导致浏览器兼容性问题。

举个例子：

html {
  font-size: 10px;
}

在google、forefox等浏览器中1rem = 10px

但在搜狗浏览器、360浏览器等浏览器中1rem = 12px（因为浏览器最小字体就是12px）

解决办法

使用rem为单位时，html的font-size最小值不要低于12px