Explore why rem computing error on chrome, remchrome

Explore why rem computing error on chrome, remchrome

Recently in a project, the tester raised a bug that some fonts on a page on the 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

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

The font size depends on your project.

2. css Method

 

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

 

Insert this style into the head label.

I have tried both of these methods, but they have no effect. I don't know what is going on. If a great God knows this, I hope you can give me some advice.

Therefore, I think the most fundamental solution is to set the font-size of the html root element to a value greater than or equal to 12px.

 

Some questions:

1. How is chrome calculated when 1rem is smaller than 12px.

 

As shown in, the font-size of my html root element is set to 62.5% (10px). The font calculated in the figure is not 25px, but 28.5941px. How does this number come from, if the minimum value is 12px, it should be 30px.

 

2. Why are some fonts correctly calculated and some errors reported.

As shown in, some of the fonts set to 2.5rem can be correctly calculated as 25px, but some cannot. What is the problem?

 

I hope anyone who understands the reason can give us some advice.