在 CSS 中，我們可以使用不同的單位來設定字體大小、邊距、填充等屬性。其中，em 和 rem 是兩個常用的相對單位，它們都基於父元素的字體大小，但各自有不同的計算方式和適用場景。
em：相對於父元素的字體大小
em 單位是指相對於父元素的字體大小。例如，如果一個元素的字體大小被設定為 1.5em，而父元素的字體大小為 16px，那麼該元素的字體大小將會是 24px（1.5 x 16）。
rem：相對於根元素的字體大小
rem 單位是指相對於根元素（<html> 元素）的字體大小。例如，如果根元素的字體大小被設定為 16px，而一個元素的字體大小被設定為 1.5rem，那麼該元素的字體大小將會是 24px（1.5 x 16）。
em 和 rem 的比較
| 特性emrem | ||
| 參考元素 | 父元素 | 根元素 |
| 適用場景 | 局部調整字體大小 | 全局調整字體大小 |
| 影響範圍 | 局部影響 | 全局影響 |
| 嵌套影響 | 字體大小會隨著父元素的字體大小而改變 | 字體大小不受父元素字體大小影響 |
em 的優點和缺點
- 優點： 允許輕鬆調整元素相對於父元素的字體大小，適合用於局部調整字體大小。
- 缺點： 嵌套元素的字體大小會隨著父元素的字體大小而改變，可能會導致字體大小難以控制，尤其是在多層嵌套的情況下。
rem 的優點和缺點
- 優點： 字體大小不受父元素字體大小影響，可以保持字體大小的穩定性，方便全局調整字體大小。
- 缺點： 不適合用於局部調整字體大小，需要使用其他單位來調整局部字體大小。
使用 em 和 rem 的示例
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 16px; /* 設定根元素的字體大小 */
}
body {
font-size: 1rem; /* 全局字體大小 */
}
.container {
font-size: 1.2em; /* 相對於父元素的字體大小 */
width: 50%;
margin: 0 auto;
}
.title {
font-size: 1.5rem; /* 相對於根元素的字體大小 */
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">標題</h1>
<p>段落文字</p>
</div>
</body>
</html>
結論
em 和 rem 是 CSS 中兩個非常有用的相對單位，它們可以幫助我們根據父元素或根元素的字體大小來調整字體大小。選擇使用 em 還是 rem 取決於您的需求，em 適合用於局部調整字體大小，而 rem 適合用於全局調整字體大小。
注意事項：
- 確保根元素的字體大小設定正確，這將影響所有使用 rem 單位的元素的字體大小。
- 使用 em 和 rem 時，請注意嵌套元素的字體大小可能會受到影響。
- 在設計網站時，需要考慮字體大小與其他元素大小之間的比例關係，以確保網站的視覺效果良好。
