CSS font-size 單位介紹入門教學筆記 | 學習筆記

在 CSS 中，px、rem、em 和 vh 都可以用來設定 font-size，但它們的用途和適用場景不同。以下是詳細解析與使用建議：

1️. px（像素，固定單位）

特性

• 絕對單位，與螢幕解析度無關。
• 不會受父元素影響，設定多少就是多少。

適用場景

精確控制字體大小，例如：

• Logo、按鈕字體
• 小型 UI 元素（如標籤、提示訊息）
• 避免字體大小變動的情境

範例

h1 { font-size: 32px; }  /* 確保標題大小為 32px */
button { font-size: 14px; }  /* UI 按鈕文字固定 14px */

何時避免？

• 不利於 響應式設計，無法根據使用者的設定（如無障礙放大字體）自適應。

2️. rem（Root EM，根元素相對單位）

特性

• 參照 html 根元素 的 font-size 來計算。
• 預設 html 的 font-size 為 16px（可透過 html { font-size: 10px; } 調整）。
• 可用於全站統一調整字體大小。

適用場景

全站一致字體設計，方便調整：

• 段落、標題（H1-H6）
• 文章內容
• 大部分標準排版

範例

html { font-size: 16px; }  /* 設定根元素大小 */
p { font-size: 1.5rem; }  /* 16px * 1.5 = 24px */

只要改變 html 的 font-size，所有 rem 設定的字體大小都會一起調整。

何時避免？

• 局部組件內縮放時，可能需要用 em 而不是 rem。

3️. em（相對單位）

特性

• 相對於 父元素的 font-size 來計算。
• 父層字體大小變大，子層 em 設定的大小也會跟著變。

適用場景

組件內部的字體調整，適用於：

• 按鈕、卡片、區塊內的標題
• 排版時要根據父層調整的字體
• 不同區域需要稍微變大的字體

範例

.container { font-size: 20px; }  /* 設定父層大小 */
p { font-size: 1.2em; }  /* 20px * 1.2 = 24px */

當 .container font-size 改變時，內部 p 的大小也會跟著變。

何時避免？

• 多層 em 巢狀結構時，字體大小可能會變得難以控制。

4️. vh（視窗高度單位）

特性

• 1vh 代表 **視窗高度的 1%**。
• 適合動態字體大小，可以讓字體隨視窗大小變化。

適用場景

全螢幕標題或 Hero 文字：

• 首頁橫幅標題
• 全螢幕展示頁面
• 需隨裝置變化的動態字體

範例

h1 { font-size: 10vh; }  /* 視窗高度的 10% */

當視窗縮小，字體會自動變小。

何時避免？

• 文字變化太大時，可能導致小螢幕閱讀困難。

如何選擇？

最佳實踐

一般網站內容

• 使用 rem 設定主字體，確保一致性：

  html { font-size: 16px; } p { font-size: 1rem; } /* 16px */ h1 { font-size: 2rem; } /* 32px */

局部 UI 組件

• 使用 em，確保字體相對變化：

  .button { font-size: 1em; } /* 依據父層大小 */

全螢幕標題

• 使用 vh，確保字體適應畫面：

  .hero-title { font-size: 8vh; }

特殊 UI（固定大小）

• 使用 px，避免字體縮放：

  .logo { font-size: 24px; }

總結

• 固定字體 → px
• 全站一致性 → rem
• 組件內相對縮放 → em
• 視窗自適應 → vh

若有特定的設計需求或專案需求，可以再根據需求細調合適的單位。

Related Posts