Detailed explanation of REM usage in CSS3

To set fonts on the page, we know that there are two common ones, px and em.

px

In web page production, we generally use "px" to set our text, because it Relatively stable and accurate. But there is a problem with this method. When the user browses the Web page we created in the browser, he changes the font size of the browser (although most people will not change the font size of the browser). At this time, he will use our Web page. The page layout was broken, and it was proposed to use "em" to define the font of the Web page.

em

Generally, the font-size of the body is used as the benchmark

Common writing method:

body {    
font-size: 62.5%;    
/*10 ÷ 16 × 100% = 62.5%*/
}
h1 {    
font-size: 2.4em;    
/*2.4em × 10 = 24px */
}p {    
font-size: 1.4em;    
/*1.4em × 10 = 14px */
}
li {    
font-size: 1.4em;    
/*1.4 × ? = 14px ? */
}

Why is it a question mark whether the "1.4em" of "li" is "14px"? When using "em" as the unit, you must know the settings of its parent element, because "em" is a relative value, and it is a value relative to the parent element.

Calculation formula: 1 ÷ font-size of the parent element × The pixel value that needs to be converted = em value

In this case, "1.4em" can be "14px", or it can be "20px", or "24px". In short, it is an uncertain value, so solve this Problem, either you know the value of its parent element, or use "1em" in any child element.

rem

rem: The W3C official website description is "font size of the root element", that is, rem is relative to the root element.

We only need to determine a reference value in the root element and set the font size in the root element. This can be completely based on your own needs. You can also refer to the picture below:

pxtoem

Students who find it troublesome to convert, also You can go to http://pxtoem.com/ to set the

common writing method:

html {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
body {
    font-size: 1.4rem;
    /*1.4 × 10px = 14px */
}
h1 {
    font-size: 2.4rem;
    /*2.4 × 10px = 24px*/
}

defines a basic font size of 62.5% (that is, 10px) in the root element. Setting this value is mainly convenient for calculation. If it is not set , will be based on "16px"). From the above calculation results, we can use "rem" as conveniently as "px", and at the same time solve the difference between "px" and "em".

Note: Under Chrome, the default bottom font is 12px, you can set font-size: 625%, and so on for others

The above is a detailed explanation of the use of REM in CSS3. For more related content, please pay attention to the PHP Chinese website ( www.php.cn)!