px 是屏幕上最稳的单位：1px = 一个设备像素（在 2 倍屏上物理是 2 个点，由浏览器处理）。cm/in/pt 属于打印样式世界，屏幕上一英寸约等于 96px，但实际会被 DPI 修正，别拿来做网页布局。
这行是 1.5rem：永远相对 <html> 的字号（本页默认 16px → 24px）。
外层容器 font-size:20px
内层 1.5em = 1.5 × 父元素字号 = 30px
宽度 50%：相对父元素的宽度；注意百分比高度需要父级有确定高度。
宽度 40vw = 视口宽度的 40%（拖动窗口宽度会看到它变化）
这一段的 max-width: 42ch：ch = 当前字体里「0」的宽度，用它限制行长最合适——正文一屏 45–75 个字符最易读。
| 单位 | 相对什么 | 典型用途 |
|---|---|---|
rem | 根元素字号 | 字号、间距的首选：一处改根字号，全站等比缩放，用户设置也能生效 |
em | 当前元素（字号类属性是父元素）的字号 | 组件内部尺寸随自身字号走，比如按钮内边距 |
% | 视具体属性而定（宽度对父宽、高度对父高、padding 对父元素宽度、字号对父字号） | 栅格、流体容器 |
vw / vh / svh / lvh / dvh | 视口宽 / 高；s 最小、l 最大、d 动态 | 整屏高度用 svh 而不是 vh，避开手机地址栏收起造成的跳动 |
ch | 「0」字符宽度 | 限制行长 |
ex / cap / ic | x 高度 / 大写字母高 / 「水」字宽（一个汉字） | ic 在中文排版里很直观：max-width: 38ic ≈ 一行 38 个字 |
fr | Grid 的剩余空间 | 只用于 grid-template-*（第十一章） |
.lines { line-height: 1.6; } /* 行高写无单位数字 = 字号的倍数，比 1.6em 更安全（不会随继承重复相乘） */
.zero { margin: 0; } /* 0 不需要单位 */
.flex { flex-grow: 1; } /* flex 系列、z-index、opacity、font-weight 都是无单位数字 */
.rot { transform: rotate(0.25turn); } /* 角度：deg / turn / rad / grad，2 的幂次场景 turn 更好读 */
.fast { transition: color .2s ease; } /* 时间：s / ms；频率：hz / khz（媒体查询里用） */
@media (min-width: 48rem) { … } /* 媒体查询里 rem 相对根字号，但注意根字号本身可能被用户改大 */
rem，让「放大根字号」这条无障碍手段真的起作用。试试拖动下面的滑块把根字号改大：em，容器宽度用 %/fr，需要贴合视口时用 vw/svh。px，别为了教条全用 rem（1px 边框在 rem 下可能算出 0.98px 导致模糊）。这段是 1rem，会跟着变
真实项目里应该让用户用浏览器的缩放/字号设置，而不是自己造一个字号滑块——滑块只是让 rem 的机制可见。