Rem explanation and usage, rem explanation and usage

Rem explanation and usage, rem explanation and usage

It seems that I haven't written a blog for a while ...... Today, I just summarized the usage of rem.

First, let's talk about common sense,The default font height of the browser is 16 PX.. Step into the topic -----> -----〉

• Compatibility:

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

Even for unsupported browsers, the solution is simple, that is, write an absolute unit statement. These browsers ignore the font size set with rem.

• Easy to use % Unit

In css, the font-size = 62.5% is declared globally in the body. The % algorithm here is the same as that in rem. Because 100% = 16px, 1px = 6.25%, 10px = 62.5%,This is 1rem = 10px, so 12px = 1.2rem. The conversion between px and rem can be achieved through 10, which is very convenient!

• Usage

Note that rem isOnly font-size relative to the root element htmThat is, you only need to set the font-size of the root element, and use the rem unit of other elements to set the corresponding percentage;

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 }

This is generally the case

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

You must know the benefits of using one item. Because the size of other fonts is based on html, you can use this method to adapt to the mobile terminal.

 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 }

In this way, only the html font size can be changed to make other fonts "responsive.

It's another nap time. If this article is incorrect, please point out ^_^