Some views on the development of popular unit REM in Mobile end

Preface

REM units in the mobile front-end development is very popular, this year I participated in the Shanghai August 8 CSS Conf Conference, several teachers have mentioned! In fact, our company very early on with REM units, on the CSS units, please see HTTP://WWW.HAOROOMS.COM/POST/CSS_UNIT_CALC the view of REMREM unit really benefits quite a lot, it is relative to the root node, so that our entire site unit can be unified. You can also make our fonts better adaptive to the size of the site. But, you know, when you use it, there's a problem: when you open a Web site with a Chrome browser, there are times when the font is very large.   But it would be nice to refresh the page. The reason for this is because we have to calculate the convenience, the original default 1rem=16px modified 1rem=10px. As a result, we usually do the following in HTML: HTML {font-size:62.5%/**10÷16x100% = 62.5% 1rem = 10px **/} However, the Chrome browser sometimes ignores the HTML Set up. So in the initialization of the page, there is a large font above the situation, the original 1.6rem should be rendered into 16px font, but was rendered into a 16*1.6=25.6px size. Problem SolvingAs you study it, you'll find that "elements" with a large font size are usually not set font-size, and the font-size of the elements is inherited from the root directory, so the font becomes larger. Therefore, one of the best solutions is:In the text you want to show the parent or its own set font-size the second solution: we add style style to the page, to the body settings font-size For example, put the following code inside the head: expect better solutions above is my solution to rem font too large, I do not know if you have a better solution to this problem.