1分鐘讀懂移動端em和rem的區別

標籤：根據   梳理   inf   pre   color   有一個   nta   教程   分享圖片   

 

rem和em其實都是相對單位，但rem是想對於html根項目字型大小，而em是相當於使用em單位的元素字型大小大小

教程幫你梳理清楚!

html布局：

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

 

css樣式：

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;
}

　　

結果：

 

這時候你可以看到，使用rem單位的盒子繼承的是html根字型大小大小；在這裡em是繼承了父盒子的字型大小大小，但有一個比較普遍的誤解，認為單位就是相對於父元素的字型大小。 事實上，根據W3標準，它們是相對於使用單位的元素的字型大小。

 

我們再來驗證下這個說法,當我們在使用em的.use_em盒子上加font-size: 50px;，這時候你會發現盒子變大了，繼承的不再是父盒子container的字型大小大小，這時變成了相對於使用em單位的盒子的字型大小

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;}

　　

 

1分鐘讀懂移動端em和rem的區別