REM relative unit use case sharing

This time I will share with you the usage cases of REM relative units. What are the precautions for using REM relative units? The following is a practical case. Let’s take a look.

rem (font size of the root element) refers to the unit of font size relative to the root element. Simply put, it is a relative unit. When you see rem, you will definitely think of the em unit. Em (font size of the element) refers to the unit of font size relative to the parent element. They are actually very similar, except that one calculation rule relies on the root element and the other relies on the parent element for calculation.

As mentioned above, rem is adapted through the root element. The root element in the web page refers to htmlWe set the font size of html You can control the size of rem,for example.

html{
 font-size:20px;
}
.btn {
 width: 6rem;
 height: 3rem;
 line-height: 3rem;
 font-size: 1.2rem;
 display: inline-block;
 background: #06c;
 color: #fff;
 border-radius: .5rem;
 text-decoration: none;
 text-align: center; 
}

We control the font size of our dom elements by changing the size of font-size in HTML.

In order to adapt to the compatibility of different resolutions, the font-size in HTML can be dynamically generated through js. We can also set it through media query for mainstream models. For example, here is the code below. If you don’t know much about media query, you can study http://www.w3cplus.com/content/css3-media-queries

html{font-size: 20px;}
@media only screen and (min-width: 320px){
 html{font-size: 20px !important;}
}
@media only screen and (min-width: 350px){
 html{font-size: 22.5px !important;}
}
@media only screen and (min-width: 365px){
 html{font-size: 23px !important;}
}
@media only screen and (min-width: 375px){
 html{font-size: 23.5px !important;}
}
@media only screen and (min-width: 390px){
 html{font-size: 24.5px !important;}
}
@media only screen and (min-width: 400px){
 html{font-size: 25px !important;}
}
@media only screen and (min-width: 428px){
 html{font-size: 26.8px !important;}
}
@media only screen and (min-width: 432px){
 html{font-size: 27.4px !important;}
}
@media only screen and (min-width: 481px){
 html{font-size: 30px !important;}
}
@media only screen and (min-width: 569px){
 html{font-size: 35px !important;}
}
@media only screen and (min-width: 641px){
 html{font-size: 40px !important;}
}

. Of course, in setting html When font-size is used, we may also see this writing method, html { font-size: 62.5% }.This is mainly to facilitate the conversion between em and px. The initial value of em is 1em=16px. Obviously, if this is the case, for example, 1.2em = 19.2px, but we rarely see the size represented by 19.2px when setting it. , that is, when using px to express the size, the value does not have decimal places. When body{font-size: is set 62.5%;}, 1em = 16px*62.5% = 10px, 1.2em = 12px, isn’t this much simpler and more accurate~~.

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

##Commonly used code organization summary

Detailed explanation of H5 Canvas use cases

The above is the detailed content of REM relative unit use case sharing. For more information, please follow other related articles on the PHP Chinese website!