Detailed explanation and usage of rem

It seems that I haven't blogged for a while... Today I just summed up the use of rem

First , let's talk about common sense, the default font height of the browser is 16px. Step into the topic ----->
• Compatibility:

Currently, mainstream versions of IE9+, Firefox, Chrome, Safari, and Opera all support rem.

Even for unsupported browsers, the solution is very simple, which is to write an additional statement of absolute units. These browsers ignore the font size set with rem.
• It is convenient to use the % unit to

declare font-size=62.5% globally in the body of css. The algorithm of % here is the same as that of rem.

Because 100%=16px, 1px=6.25%, so 10px=62.5%,

which is 1rem=10px, so 12px=1.2rem. The conversion between px and rem can be obtained through 10, which is very convenient!
• How to use

Note that rem is only relative to the font-size of the root element htm, that is, only the font-size of the root element needs to be set, and other elements can be set to the corresponding percentage using the rem unit;

example:

1 /*16px * 312.5 % = 50px;*/
2 html{font-size: 312.5%;}

1 /*50px * 0.5 = 25px;*/
2 body{
3 font-size: 0.5rem;
4 font-size\0:25px;
5 }

Generally, it is used like this

1 html{font-size:62.5%;}
2 body{font-size:12px;font-size:1.2rem ;}
3 p{font-size:14px;font-size:1.4rem;}
•Advantages

Use one thing You must know its benefits. Since other font sizes are based on html, you can use this method when adapting to the mobile terminal.


Copy code
1 @media only screen and (min-width: 320px){
2 html {
3 font-size: 62.5% !important;
4 }
5 }
6 @media only screen and (min-width: 640px){
7 html {
8 font-size: 125% !important;
9 }
10 }
11 @media only screen and (min-width: 750px){
12 html {
13 font-size: 150% !important;
14 }
15 }
16 @media only screen and (min-width: 1242px){
17 html {
18 font-size: 187.5% !important;
19 }
20 }

Copy code In

this way , you can only change the font size of html and make other fonts "responsive".

It's nap time again, if there is something wrong with this article, please point out ^_^