探究爲什麼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，有的卻不行，這是怎麼回事呢？

 

但願瞭解其中原因的人能不吝賜教。