新手指南：深入了解 CSS 中的 rem 和 em 單位
更新日期： 2024 年 9 月 14 日
在設計網頁時，尺寸和間距的控制至關重要。
CSS 提供了多種單位來設置元素的大小，其中 rem 和 em 是兩個常用的相對單位。
理解它們的不同之處，可以幫助你更靈活地進行網頁布局和設計。
什麼是 em？
em 是一個相對單位，根據元素的當前字體大小來計算。如果沒有特別指定字體大小，則默認繼承自父元素。
例子
假設你有以下的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em 和 rem 單位示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p class="text">這是一段文字，應用的是 1.5em 的字體大小。</p>
</div>
</body>
</html>CSS：
body {
font-size: 16px;
}
.container {
font-size: 2em; /* 32px */
}
.text {
font-size: 1.5em; /* 24px */
}在這裡：
- body 的字體大小是 16px。
- .container 的字體大小設定為 2em，這表示它是 body 字體大小的兩倍，即 32px。
- .text 的字體大小為 1.5em，這將基於 .container 的字體大小計算，即 1.5 * 32px = 48px。
什麼是 rem？
rem 也是一個相對單位，但不同於 em，rem 是根據根元素（即 <html> 標籤）的字體大小來計算，無論這個單位在哪個元素中使用。
例子
假設你有以下的 CSS：
html {
font-size: 16px;
}
.container {
font-size: 2rem; /* 32px */
}
.text {
font-size: 1.5rem; /* 24px */
}
在這裡，所有的 rem 計算都基於 html 的字體大小（16px）：
- .container 的字體大小是 2rem，即 32px。
- .text 的字體大小是 1.5rem，即 24px。
與 em 不同，無論元素嵌套的層級有多深，rem 始終基於根元素計算，這使得它在整個頁面中更具一致性和可預測性。
rem 和 em 的選擇：什麼時候用哪個？
使用 em
當你希望元素的大小根據父元素動態調整時，em 是不錯的選擇。例如，你可能希望一個段落中的文字大小隨著父容器的字體大小變化。
例子：在組件設計中使用 em
當你設計可重用的組件時，使用 em 可以讓組件內部的元素根據容器的字體大小自動調整，這使得組件在不同的上下文中更靈活。
.button {
font-size: 1.5em;
padding: 0.5em 1em;
}
這樣，無論 button 放在哪個元素內，它的大小和間距都會根據父元素的字體大小自適應。
使用 rem
當你需要全局一致的尺寸時，rem 更加穩定。例如，你可以使用 rem 設置全局字體大小或間距，這樣即使在不同的嵌套層級，這些元素的大小仍然保持一致。
例子：建立響應式字體大小
使用 rem 可以更容易地建立響應式字體大小，因為你只需調整根元素的字體大小，整個頁面上的 rem 單位會自動隨之調整。
html {
font-size: 100%; /* 等於 16px */
}
h1 {
font-size: 2rem; /* 32px */
}
p {
font-size: 1rem; /* 16px */
}
如果你將根元素的字體大小改為 125%（即 20px），h1 和 p 的字體大小會相應變為 40px 和 20px。
結語
理解 rem 和 em 的區別，能夠幫助你更好地控制網頁的可讀性和布局的靈活性。
當你開始設計或調整你的網頁時，記得選擇最合適的單位來達到預期的效果。
希望這篇文章能幫助你，更好地掌握這兩個重要的 CSS 單位！