CSS 单位换算

CSS 单位分绝对与相对两类。绝对单位 px（像素，96px = 1 英寸）、pt（磅，1pt = 1/72 英寸，主要用于打印）；相对单位 rem（相对根元素字号）、em（相对当前或父元素字号）、vw/vh（相对视口宽高的 1%）。

rem 方案是现代响应式的主流：浏览器默认根字号 16px，则 1rem = 16px。设计稿 32px 的标题就是 2rem。全局缩放只需改根字号，所有 rem 尺寸联动变化，对无障碍缩放友好。

em 与 rem 的关键差异：em 相对父元素，嵌套时会层层放大（1.2em 套 1.2em 就是 1.44 倍），曾让无数开发者头疼；rem 永远相对根元素，行为可预测。vw 则用于流式排版：1920px 视口下 1vw = 19.2px。

相对单位的选择决定布局的响应性：em 基于父元素字号（继承时会累积）、rem 基于根字号（可预测）、vw/vh 基于视口（1vw=1%宽度）、ch 基于「0」字符宽（适合等宽对齐）。推荐优先 rem + 百分比 + flex/grid 组合布局，字号交互上用 em，避免大面积 vw 导致移动端过小。clamp() 可给字号设置上下限实现平滑缩放。