Read the difference between em and rem on mobile terminals in 1 minute

 

Rem and em are actually relative units, but rem is the font size for the HTML root element, and em is the element font size equivalent to using em units

Tutorial to help you sort it out!

html layout:

<div class="container">
　　<div class="use_em"></div>
　　<div class="use_rem"></div>
</div>

 

css style:

html{
　font-size: 40px;
}
.container{
　　font-size: 20px;
}
.use_em{
　　width: 2em;
　　height: 2em;
　　background-color: blue;
}
.use_rem{
　　width: 2rem;
　　height: 2rem;
　　background-color: green;
}

　　

result:

 

At this time, you can see that the box using the rem unit inherits the html root font size; here em inherits the font size of the parent box, but there is a common misunderstanding that the unit is the font size relative to the parent element . In fact, according to the W3 standard, they are relative to the element's font size using units.

 

Let's verify this statement again. When we add font-size: 50px; to the .use_em box that uses em, you will find that the box has become larger, and the font size of the parent box container is no longer inherited. became the font size relative to the box using em units

html{
　　font-size: 40px;
}
.container{
　　font-size: 20px;
}
.use_em{
　　font-size: 50px;
　　width: 2em;
　　height: 2em;
　　background-color: blue;
}
.use_rem{
　　width: 2rem;
　　height: 2rem;
　　background-color: green;
}