探究为何rem在chrome浏览器上计算出错

最近在一个项目中，测试同学提了一个 bug，说手机上有个页面的某些字体显示偏大。就像这样

我用 chrome 浏览器在 pc 上测试了一下，发现 pc 上也有这个问题，但是用其它浏览器打开这个页面就没有发现这个问题。

于是，上网百度了一下，发现原来是 chrome 浏览器的问题。

通过各种百度 Google 然后我总结了一下这个问题产生的原因：

chrome 浏览器目前支持的最小的字体大小为 12px，而我在 html 根元素上设置 font-size:62.5%，计算之后就是 10px，1rem=10px。

由于我页面字体大小都是按照 10px 的基数去算的，所以当 chrome 浏览器计算字体大小时就出现了出错。

解决方案：

又经过一番百度 Google 之后，总结了一下这种问题的解决方法。

网上提供的两种最多的解决方案就是

1、js 方法

1
2
3

<script type="text/javascript">
  document.body.style.fontSize = "1.6rem";
</script>

具体的字号根据你的项目来决定

2、css 方法

<style>
  body {
    font-size: 1.6rem;
  }
</style>

将这个样式插入到 head 标签里面

这两种方式我都试用了，但是并没有效果，我也不清楚是怎么回事，如果有大神知道，还望不吝赐教。

所以，目前我认为最根本的解决方法就是，将 html 根元素的 font-size 大小设置为大于等于 12px。
一些疑惑：

1、当 1rem 小于 12px 时，chrome 是怎么计算的。

如上图所示，我的 html 根元素的 font-size 设置为 62.5%（10px），图中字体计算的时候并不是 25px，而是 28.5941px，这个数是怎么来的，如果按照最小 12px 来算应该是 30px 才对啊。

2、为啥有的字体计算正确，有的出错。

如上图所示，同样设置为 2.5rem 的字体，有的能正确计算出是 25px，有的却不行，这是怎么回事呢？

希望了解其中缘由的人能不吝赐教。

Kwzm's blog