比較所有 CSS 單位，包括 px、em、rem、vw、vh、fr 等。包含每個單位的範例、瀏覽器支援情況和使用時機。
| 單位 | 比較所有 CSS 單位，包括 px、em、rem、vw、vh、fr 等。包含每個單位的範例、瀏覽器支援情況和使用時機。 | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| 單位 | 比較所有 CSS 單位，包括 px、em、rem、vw、vh、fr 等。包含每個單位的範例、瀏覽器支援情況和使用時機。 | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| 單位 | 比較所有 CSS 單位，包括 px、em、rem、vw、vh、fr 等。包含每個單位的範例、瀏覽器支援情況和使用時機。 | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| 單位 | 比較所有 CSS 單位，包括 px、em、rem、vw、vh、fr 等。包含每個單位的範例、瀏覽器支援情況和使用時機。 | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| 單位 | 比較所有 CSS 單位，包括 px、em、rem、vw、vh、fr 等。包含每個單位的範例、瀏覽器支援情況和使用時機。 | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
隨 :root 字體大小縮放，遵循用戶瀏覽器設置，跨組件一致
避免使用 px — 不尊重用戶字體偏好
rem 用於全局一致間距；em 用於相對於組件字體大小的間距
避免對縮放組件使用 px
% 用於流體容器；ch（45–75ch）用於最佳散文行長
避免對主要內容寬度使用固定 px
dvh 避免移動瀏覽器 chrome 重疊；vh 僅適用於桌面
避免在移動端單獨使用 100vh — URL 欄會裁剪內容
按比例分配剩餘空間；在網格中比 % 更簡潔
避免隨意將 fr 與固定 px 列組合
像素精確渲染；不需要隨文本縮放
此處無需相對單位
字體大小使用 rem。rem 相對於根元素字體大小（通常為 16px），通過更改根字體大小可以輕鬆縮放整個 UI。這也尊重用戶瀏覽器字體大小首選項，提高可訪問性。僅對邊框、陰影和不應縮放的元素使用 px。
em 相對於父元素的字體大小，在嵌套元素中可能會累積。rem 相對於根（'<'html>）元素的字體大小，更具可預測性。對於字體大小，通常首選 rem。em 對於應隨組件自身字體大小縮放的內邊距和外邊距很有用。
對於需要相對於瀏覽器視口調整大小的元素（如全屏 Hero 部分、模態框），使用 vw/vh。對於需要相對於父容器調整大小的元素，使用百分比。在地址欄影響高度的移動設備上，dvh（動態視口高度）優於 vh。
容器查詢單位（cqw、cqh、cqi、cqb）相對於容器元素的大小而不是視口。它們需要容器上下文（container-type: inline-size）。非常適合真正響應式的組件，無論視口大小如何，都需要適應容器大小。