rem 和 em 都是 CSS 的「相對」單位。
兩者最大的差別在於
rem 是乘以「根」元素的 px 數值作為運算的結果，如果沒有設定「根」元素的數值，default 值就是 16px。
<html class="root">
root
<div class="child">
child
<div class="grandson">
grandson
</div>
</div>
</html>
html.root {
font-size: 20px;
}
.child {
font-size: 2rem; /* 20px * 2 = 40px */
}
.grandson {
font-size: 2rem; /* 20px * 2 = 40px */
}
em 是乘以「父」元素的 px 數值作為運算的結果，如果沒有設定「父」元素的數值，default 值就是 16px。
<div class="father">
father
<div class="child">
child
<div class="grandson">
grandson
</div>
</div>
</div>
.father {
font-size: 20px;
}
.child {
font-size: 2em; /* 20px * 2 = 40px */
}
.grandson {
font-size: 2em; /* 40px * 2 = (20px * 2) * 2 = 80px */
}
為什麼要使用相對單位？使用 px 這種絕對單位不適合嗎？rem 和 em 是為了解決響應式設計下，px 這種絕對尺寸不夠彈性的問題，使用相對單位的話，這樣只要在不同尺寸的螢幕上改變「根」或「父」元素的 px 數值，就可以改變所有子元素的單位數值，讓不同的螢幕都有好的呈現，而不用改動所有 CSS 的 px 數值大小。
既然 rem 和 em 都是相對單位，那我們要選擇使用哪一個？
「根」元素是所有「父」元素的最上層元素，所以秉持著先動粗後調細的原則，大多數情況下都會先在 root 的 html 元素上設定 font-size，在底下的所有子元素上設定 rem，如果有細節的樣式需要調整的話，才在父元素上設定 font-size，子元素加上 em 做更細微的調整。
以我工作上遇到的案例來說明的話rem 會用於 RWD 的排版
<h1>title</h1>
<p>paragraph</p>
html {
font-size: 12px;
@media (min-width: 768px) {
font-size: 16px ;
}
}
h1 {
margin-bottom: 2rem;
}
em 則是會用於調整 RWD 下 svg icon 或 logo 的細節
<sapn class="icon">
<svg width="1em" height="1em">
...
</svg>
</span>
.icon {
font-size: 16px;
@media (min-width: 768px) {
font-size: 20px ;
}
}
CSS units for font-size: px | em | rem
PX, EM or REM Media Queries?
iThome鐵人賽
看影片追技術