Explore why rem computing error on chrome, remchrome

Source: Internet
Author: User

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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.