Introducing the use of REM 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 is more stable and precise. 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. Page layout was broken, and then 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

Commonly used 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 "li" Is "1.4em" or "14px" a question mark? 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 ÷ parent element font-size Not sure about the value, so to solve the 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.

Commonly used 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 to facilitate calculation. If it is not set, it will be "16px ” as the benchmark). 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

Browser compatibility

IE9 or above Browsers that support CSS3 will definitely support it. If you want to be compatible with lower versions of IE, you can consider using px for lower version browsers below IE9.

The above is the detailed content of Introducing the use of REM in css3. For more information, please follow other related articles on the PHP Chinese website!