跳轉到

建立 2025-02-25 更新 2026-09-11

CSS 單位（Units）

長度、間距、字級都要寫單位（0 可省略）。選錯單位，RWD 會從「彈性」變成「處處破版」。

絕對單位（Absolute Units）

絕對單位不隨父元素或視窗改變。螢幕上幾乎只用 px；cm、in、pt 比較常見於列印樣式。

單位 說明 範例
px CSS 像素（最常用） width: 320px;
cm / mm 公分 / 毫米 width: 10cm;
in 英吋（1in = 2.54cm） margin: 0.5in;
pt 點，1pt = 1/72 in font-size: 12pt;
pc 1pc = 12pt font-size: 1pc;

px 不是螢幕上的實體像素

高 DPI 螢幕上，1 CSS px 可能對應多個實體像素。對網頁排版來說，把它當成「設計稿上的像素」即可。

相對字級：em 與 rem

單位 參考對象 適合
em 該元素自己的 font-size（繼承自父層） 元件內部 padding、icon 大小
rem 根元素 <html> 的 font-size 全站字級、間距系統 
html { font-size: 16px; }

.card {
  font-size: 1.125rem;     /* 18px，不看父層怎麼變 */
  padding: 0.75em;         /* 跟著卡片自己的字級 */
}

.danger { font-size: 2em; } /* 若父層已是 2em，會再加倍 */

em 會層層放大

巢狀標題若都寫 font-size: 1.2em，越深越大。全站節奏請用 rem；只有「跟著這顆元件的字級走」才用 em。

視口單位（Viewport Units）

單位 意義
vw 視口寬度的 1%
vh 視口高度的 1%
vmin / vmax 較短邊 / 較長邊的 1%
svh / dvh / lvh 小 / 動態 / 大視口高度（行動瀏覽器網址列會伸縮）
svw / dvw / lvw 對應的寬度變體 
.hero {
  min-height: 100dvh; /* 行動裝置比較不容易被網址列切到 */
  padding: 8vmin;
}

100vh 在手機上的陷阱

舊的 100vh 常包含被網址列擋住的區域，底部按鈕會被吃掉。滿版區塊優先試 100dvh 或 100svh。

百分比、ch、ex

單位 參考 典型用途
% 多數情況是包含區塊的對應尺寸 欄寬、圖片 max-width
ch 目前字體中「0」的寬度 程式碼區塊、固定字數輸入框
ex 小寫 x 的高度 較少用，排版微調
lh 元素的 line-height 讓間距跟行高對齊

padding / margin 的百分比是相對包含區塊的寬度（連上下也是），不是高度。這點常讓人意外。

calc() 與現代數學函式

calc() 可混用單位；加減號兩邊必須有空白。

.main {
  width: calc(100% - 2rem);
  min-height: calc(100dvh - 64px); /* 扣掉固定導覽列 */
}

更完整的 min()、max()、clamp() 見 函式。字級常用：

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 2.5rem);
}

怎麼選單位

情境 建議 原因
全站字級 rem 使用者改瀏覽器預設字級時仍可縮放
元件內邊距 em 或 rem em 會跟元件字級連動
版面欄寬 %、fr、minmax() 交給 Flex / Grid
滿版英雄區 dvh / svh 適應行動瀏覽器
1px 髮絲線、icon 精準對齊 px 不希望被字級牽動
程式碼行寬 ch 約 60–80 字最易讀

設計 token

先在 :root 訂 --space: 0.5rem，間距用 calc(var(--space) * 3)，比到處寫 12px、24px 好改。見 變數。

總結

  • 螢幕排版以 px、rem、%、vw / dvh 為主。
  • 字級與間距系統優先 rem；元件內部可用 em。
  • 需要「不要超過、也不要小於」時用 clamp()，而不是只寫死 px。

接著請讀 層疊與優先權，理解為什麼你的單位寫對了，畫面卻還是被別條規則蓋掉。