Explore why REM calculates errors on a Chrome browser

Recently in a project, the test classmate raised a bug, said that there is a page on the phone some font display is large. Just like this.

I tested it on my PC with a Chrome browser, and I found this problem on my PC, but I didn't see it when I opened the page with another browser.

So, the internet Baidu a bit, found that the original Chrome browser problems.

Through a variety of Baidu Google and then I summed up the cause of the problem:

The minimum font size currently supported by Chrome is 12px, and I set font-size:62.5% on the HTML root element, which is 10px,1rem=10px after the calculation.

Since my page font size is calculated according to the base of 10px, there is an error when the Chrome browser calculates the font size.

Solution:

After some Baidu Google, summed up the solution to this problem.

The two most common solutions available online are

1. js method

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

The specific font size depends on your project.

2. CSS Methods

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

Insert this style into the head tag

Both of these methods I tried, but did not have the effect, I do not know what is going on, if the great God know, but also hope to enlighten.

So, at the moment, I think the most fundamental solution is to set the font-size size of the HTML root element to be greater than or equal to 12px.

Some doubts:

1, when 1rem is less than 12px, how chrome is calculated.

As shown, the font-size of my HTML root element is set to 62.5% (10px), the figure of the font calculation is not 25px, but 28.5941px, this number is how to come, if the minimum 12px to calculate should be 30px is right AH.

2, why some font calculation is correct, and some errors.

As shown, also set to 2.5rem font, some can correctly calculate is 25px, some but not, this is how to go?

Those who wish to know the reason can be spared.

Explore why REM calculates errors on a Chrome browser