CSS 尺寸单位（px rem em vh）
界面字号阶梯优先 rem；必须时再用 px 画细边框。
| 单位 | 相对什么 | 典型用途 |
|---|---|---|
| px | Device pixel (CSS pixel) | Borders, precise icons |
| rem | Root element font-size | Type scale, spacing |
| em | Parent font-size | Component-local sizing |
| % | Parent property | Widths, flexible layouts |
| vw | 1% viewport width | Full-bleed sections |
| vh | 1% viewport height | Hero height (mind mobile UI) |
| vmin / vmax | Smaller/larger viewport side | Square-ish responsive sizing |
| ch | Width of “0” glyph | Code blocks, monospace fields |
| ex | x-height of font | Rare fine typography |
| svh / lvh / dvh | Small/large/dynamic viewport | Mobile browser chrome-safe height |
说明
- 移动端 100vh 可能含被隐藏的浏览器栏，支持时优先 dvh/svh。
- 用户字体大小会影响 rem，这对无障碍通常是好事。
常见问题
- 1rem 等于多少 px？
- 1rem 等于根元素字号；浏览器默认 16px 时，1rem 就是 16px。
- em 和 rem 有什么区别？
- rem 始终相对根元素字号，em 则相对当前元素（继承自父级）的字号。
- 为什么移动端 100vh 不准？
- 移动浏览器会隐藏或显示地址栏，100vh 可能高于可视区域，支持时用 dvh 或 svh。