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

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

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

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

经过各类百度Google而后我总结了一下这个问题产生的缘由：

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

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

解决方案：

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

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

一、js方法

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

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

二、css方法

 

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

 

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

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

因此，目前我认为最根本的解决方法就是，将html根元素的font-size大小设置为大于等于12px。

 

一些疑惑：

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

 

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

 

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

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

 

但愿了解其中原因的人能不吝赐教。