Explore why rem is computing errors on chrome-eager to dream

Explore why rem's computing error on chrome-eager to dream recently in a project, the tester raised a bug saying that some fonts on a page on a mobile phone are too large. Just like this

I tested it on the pc using chrome browser and found this problem on the pc, but I did not find this problem when I opened this page using other browsers.

So I went online to Baidu and found that it was a problem with the chrome browser.

Through various Baidu and Google, I summarized the causes of this problem:

Currently, chrome supports a minimum font size of 12 PX, while I set font-size: 62.5% on the html root element. After calculation, the font size is 10px and 1rem = 10px.

Because the font size of my page is calculated based on the base of 10 PX, an error occurs when the font size of chrome browser is calculated.

Solution:

After Baidu and Google, I summarized the solution to this problem.

The two most available solutions on the Internet are:

1. js method