CSS 單位 (Units)

CSS 提供多種單位來設定元素的大小、間距、字體等數值。單位主要分為「絕對單位」和「相對單位」兩大類。

絕對單位

絕對單位的大小是固定的，不會隨著其他因素改變。

單位	說明
`px`	像素 (pixel)，最常用的絕對單位
`cm`	公分
`mm`	公釐
`in`	英吋 (1in = 96px = 2.54cm)
`pt`	點 (1pt = 1/72 in)

px（像素）

px 是網頁設計最常用的單位，1px 對應螢幕上的一個像素點。

.box {
  width: 200px;
  height: 100px;
  font-size: 16px;
}

相對單位

相對單位的大小會根據參照對象而改變，更適合用於響應式設計。

em

em 相對於「元素本身」的 font-size，常用於 padding、margin 等。

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 16px × 1.5 = 24px */
  padding: 1em; /* 24px（使用元素自己的 font-size） */
}

em 用於 font-size 時，參照的是「父元素」的 font-size；用於其他屬性時，參照的是「元素自己」的 font-size。

rem

rem (root em) 相對於「根元素」(<html>) 的 font-size，避免了 em 的巢狀計算問題。

html {
  font-size: 16px; /* 瀏覽器預設通常是 16px */
}

.box {
  font-size: 1.5rem; /* 16px × 1.5 = 24px */
  padding: 1rem; /* 16px */
  margin: 2rem; /* 32px */
}

rem 的優點是計算簡單，所有元素都參照同一個基準值。

ch

ch 相對於所屬字體中數字「0」的寬度。它非常適合用來控制文字內容的寬度，以達到最佳的閱讀體驗（通常建議一行文字在 45-75 個字元之間）。

.article-text {
  /* 將文字容器限制在約 60 個字寬，增加閱讀快適度 */
  max-width: 60ch;
}

%（百分比）

百分比相對於「父元素」的對應屬性值。

.parent {
  width: 800px;
  font-size: 20px;
}

.child {
  width: 50%; /* 800px × 50% = 400px */
  font-size: 80%; /* 20px × 80% = 16px */
}

不同屬性的百分比參照對象：

width：參照父元素的 width
height：參照父元素的 height
padding、margin：參照父元素的 width（即使是上下方向）
font-size：參照父元素的 font-size

vw 和 vh（視窗單位）

相對於瀏覽器視窗 (viewport) 的大小。

vw：視窗寬度的 1%
vh：視窗高度的 1%
vmin：vw 和 vh 中較小的值
vmax：vw 和 vh 中較大的值

/* 滿版區塊 */
.hero {
  width: 100vw;
  height: 100vh;
}

/* 響應式字體 */
h1 {
  font-size: 5vw; /* 字體大小隨視窗寬度縮放 */
}

新一代視窗單位 (Dynamic Viewport)

傳統的 vh 在手機瀏覽器上常會因為網址列（URL bar）的出現或隱藏而產生排版問題。CSS 推出了三種新的前綴來更精確地控制：

sv* (Small Viewport)：假設網址列顯示時的最小視窗大小。
lv* (Large Viewport)：假設網址列隱藏時的最大視窗大小。
dv* (Dynamic Viewport)：動態計算，會隨著網址列縮放而即時改變。

單位	說明
`svw`, `svh`	最小視窗寬度 / 高度
`lvw`, `lvh`	最大視窗寬度 / 高度
`dvw`, `dvh`	動態視窗寬度 / 高度

/* 讓內容剛好填滿手機螢幕（不被網址列遮住） */
.mobile-hero {
  height: 100dvh;
}

在大多數現代行動裝置上，建議優先使用 dvh 來處理滿版高度的需求。

容器查詢單位 (Container Query Units)

容器查詢單位讓元素的大小可以根據其「父容器」的大小來決定，而不僅僅是螢幕大小。這在製作可重複使用的組件（Component）時非常有用。詳細介紹請參考 CSS 容器查詢。

使用這些單位前，父元素必須先設定 container-type。

cqw：容器寬度的 1%
cqh：容器高度的 1%
cqmin：容器寬高之中較小值的 1%
cqmax：容器寬高之中較大值的 1%

.card-container {
  container-type: inline-size;
}

.card-title {
  /* 標題大小隨「卡片容器」寬度縮放，而非整個螢幕 */
  font-size: 10cqw;
}

單位選擇建議

用途	建議單位
字體大小	`rem`
內距、外距	`rem` 或 `em`
文字最大寬度	`ch`
固定大小元素	`px`
響應式寬度	`%` 或 `vw`
滿版區塊	`dvh`、`vw`
組件內部響應式	`cqw`、`cqh`
邊框	`px`
media query 斷點	`px` 或 `em`

單位換算範例

假設根元素 font-size 為 16px：

html {
  font-size: 16px;
}

/* 以下都等於 24px */
.example {
  font-size: 24px;
  font-size: 1.5rem; /* 16 × 1.5 = 24 */
  font-size: 150%; /* 繼承值 × 150% */
}

無單位數值

某些屬性可以使用無單位的數值：

.text {
  line-height: 1.5; /* 字體大小的 1.5 倍 */
  opacity: 0.8; /* 0 到 1 之間 */
  z-index: 100; /* 整數 */
  flex-grow: 1; /* 比例值 */
}

line-height 使用無單位數值是推薦的做法，因為子元素會繼承這個比例，而不是計算後的固定值。

/* 推薦 */
body {
  font-size: 16px;
  line-height: 1.5; /* 子元素的 line-height 會是各自 font-size 的 1.5 倍 */
}

/* 不推薦 */
body {
  font-size: 16px;
  line-height: 24px; /* 子元素會繼承固定的 24px */
}