了解 CSS 大小單位：px、em、rem、% 等

在 CSS 中，您可以使用多種單位來控制元素的大小，從像素 (px) 到百分比 (%)，再到 em 和 rem 等相對單位。為您的設計選擇正確的單元對於建立響應式且可存取的佈局至關重要。本指南涵蓋了最常見的 CSS 大小單位、何時使用每種單位以及它們如何影響您的佈局。

---

1. 像素（px）

像素是 CSS 中最常見的絕對單位之一。 px 代表螢幕上的一個實體像素。由於它是固定的，因此使用 px 意味著無論用戶的設定如何，元素都將保持相同的大小。

何時使用 px：

• 使用 px 來表示圖示或邊框等精確、固定的元素。
• 避免使用 px 作為文本，因為當使用者調整瀏覽器縮放等級時，它會影響可訪問性。

範例：

p {
  font-size: 16px;
  width: 200px;
}

---

2. 百分比（%）

% 單位是相對的，這意味著它會根據父元素的大小進行調整。這種靈活性使得 % 成為響應式設計的重要工具，特別是對於元素根據視窗調整大小的流體佈局。

何時使用%：

• 對容器或映像等佈局元素使用 %，這些元素應相對於其父容器進行調整。
• 將 % 與媒體查詢結合，創造出流暢、響應式的設計。

範例：

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

3.em 單位

em 單位是基於其最接近的父元素的字體大小的相對單位。如果沒有定義父字體大小，則預設為瀏覽器的基本字體大小（通常為 16px）。

重點：

• 1em 等於父元素的字體大小。

• 1em 是兩倍大小，依此類推。

• 嵌套時要小心，因為 em 值在應用於嵌套元素時可能會倍增。

何時使用它們：

• 用於與文字大小相關的間距、填充或邊距調整。

• 元件中的字體大小應相對於其父級文字大小進行調整。

範例：

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

4. rem 單位

與 em 不同，rem 單位基於根元素 () 的字體大小，這意味著 1rem 在整個文件中保持一致（通常為 16px，除非自訂）。這使得 rem 成為一個可靠的單位，可以在網頁上實現一致的排版和間距。

何時使用 rem：

• 無論巢狀元素為何，組件之間的字體大小保持一致。

• 透過明確的參考點實現更具可擴展性和可維護性的設計。

範例：

p {
  font-size: 16px;
  width: 200px;
}

---

5. 視口單位（vw 和 vh）

視口單位——vw（視口寬度）和vh（視口高度）——是基於視口（瀏覽器視窗）大小的反應單位。 1vw 等於視口寬度的 1%，1vh 等於視口高度的 1%。

何時使用 vw 和 vh：

• 對於應隨瀏覽器大小縮放的元素，例如整頁英雄部分。

• 製作根據螢幕寬度調整的響應式排版。

範例：

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

6. 靈活的長度單位（最小、最大和箝位）

min()、max()和clamp()等新單位對於響應式設計非常強大，允許根據最小值或最大值進行條件調整。

min(a, b)：取兩個值中的最小值。
max(a, b)：取兩個值中最大的一個。
箝位（最小值，首選，最大值）：設定在定義範圍內適應的值。

何時使用：

• 適合特定範圍的響應式排版。
• 用於根據視窗調整組件大小，但有最小或最大限制。

範例：

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

結論

每個 CSS 單元都有自己的優點和理想的用例：

• px 表示精確、固定的元素。
• % 用於流暢、響應式佈局元件。
• em 用於相對於父元素進行縮放。
• rem 實作整個頁面的一致縮放。
• 動態、基於視口的元素的視口單位。
• 像clamp()這樣的靈活單元，用於自適應、條件樣式。

掌握這些 CSS 單元可以幫助您建立靈活、可存取且可維護的佈局。根據您的設計需求混合搭配它們，然後觀看您的佈局變得栩栩如生！祝造型愉快！

以上是了解 CSS 大小單位：px、em、rem、% 等的詳細內容。更多資訊請關注PHP中文網其他相關文章！