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的區別