CSS 尺寸單位（px rem em vh）
介面字號階梯優先用 rem；需要髮絲線邊框時才用 px。
| 單位 | 相對於 | 典型用途 |
|---|---|---|
| px | 裝置像素 (CSS 像素) | 邊框、精確圖示 |
| rem | 根元素字號 | 字號階梯、間距 |
| em | 父元素字號 | 元件內部尺寸 |
| % | 父元素屬性 | 寬度、彈性版面 |
| vw | 視窗寬度的 1% | 滿版區塊 |
| vh | 視窗高度的 1% | Hero 高度（注意行動版 UI） |
| vmin / vmax | 視窗較短/較長邊 | 近方形的響應式尺寸 |
| ch | 「0」字元寬度 | 程式碼區塊、等寬欄位 |
| ex | 字體的 x 高度 | 少見的精細排版 |
| svh / lvh / dvh | 小/大/動態視窗 | 行動瀏覽器安全高度 |
說明
- 行動裝置上 100vh 可能包含被隱藏的瀏覽器列，支援時優先 dvh/svh。
- 使用者字型大小會影響 rem，這對無障礙通常是好事。
常見問題
- 1rem 等於多少 px？
- 1rem 等於根元素字號；瀏覽器預設 16px 時，1rem 就是 16px。
- em 和 rem 有什麼不同？
- rem 始終相對根元素字號，em 則相對目前元素（繼承自父層）的字號。
- 為什麼行動裝置上 100vh 不準？
- 行動瀏覽器會隱藏或顯示網址列，100vh 可能高於可視區域，支援時請用 dvh 或 svh。