1. The difference between px and em and rem
px: fixed pixel, how much is set
em: set relative to the parent element
rem: set relative to the root element
2. Application
<style>
html{
font-size: 50px;
}
</style>
<body>
<div class="f_box" style="font-size: 20px">
<div style="font-size: 30px">px</div> <!--固定长度-->
<div style="font-size: 2em">em</div> <!--2*20=40 相对于f_box的倍数-->
<div style="font-size: 0.5rem">rem</div><!--0.5*50=25 相对于html的倍数-->
<div style="font-size: 25px">rem</div>
</div>
</body>3. Usage scenarios
Fixed web pages can use px; if it is an elastic layout, mobile terminals can use em and rem