相对单位
Relative Units
别名:相对单位相对长度rem 和 em 的区别为什么改浏览器字号界面不变大响应式单位relative unitsrem vs empx vs rem
这是什么
长度可以写死成 px，也可以相对别的量：rem 相对根元素字号，em 相对元素自身或父级的字号，% 相对容器，vw/vh 相对视口。用户把浏览器默认字号调大时，用 px 排的版面纹丝不动，用 rem 的会整体放大。字号、间距、圆角尽量用 rem，只有边框与发丝线才写死 px。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 用户能改浏览器默认字号，界面需要跟着一起放大
- 同一组件要在不同容器与字号下复用，尺寸需自适应
- 做随视口变化的流式排版、间距或整屏区块
✕ 不适用场景
- 1px 发丝线与需要绝对精确的边框
- 位图按原始像素对齐，不允许任何取整偏差
- em 在多层嵌套里层层放大，尺寸彻底失控
常见形式
相对根字号 rem
Root-relative rem
1rem 等于根字号，改根字号整页同步缩放
相对父级 em
Local em
1em 取决于当前字号，嵌套会层层相乘
视口单位 vw/vh
Viewport units
随窗口尺寸变化，适合整屏区块与流式间距
实现要点
font-size: 1rempadding: 1.5remwidth: 50vwheight: 100dvhborder: 1px solid var(--color-line):root 不写死 font-size，让浏览器默认字号保持可调；正文用 1rem，组件内字号与间距用 rem，最大宽度用 ch/rem。vw/vh 用于整屏区块，vh 在移动端改用 dvh 以避开地址栏跳动。发丝线与边框保留 1px。em 只用在确实需要随局部字号缩放的场合，并留意嵌套相乘。
平台 API
rememvwvhcalc()代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | rem / em 相对根字号与相对父级字号 |
| CSS | vw / vh / dvh 相对视口宽高，dvh 处理移动端地址栏 |
| Tailwind CSS | rem-based spacing scale |
相关概念
用一组按比例递增的字号定义标题与正文层级，让排版有稳定节奏。以正文基准字号乘以固定比例（如 1.25 大三度、1.333 纯四度）逐级放大，标题之间形成可预期的视觉落差，不必逐档拍脑袋定 px；也可用 sm/md/lg 尺码或 clamp() 流式档位落地。
基础搭配使用屏幕同时用两套像素计数：真实的设备像素与布局用的 CSS 像素，一个 CSS 像素里塞进几个设备像素就是设备像素比 DPR。手机像素密、CSS 像素少，位图被撑到 CSS 尺寸就发虚。位图按 2x/3x 提供并配 srcset 与矢量即可锐利；文字清晰度取决于字形渲染，与单位无关，rem 只用于相对根字号缩放。
基础相似概念用一组固定的间距档位（如 4、8、12、16、24、32、48px，通常按 4 或 8 的倍数生长）统一控制 padding、margin 与 gap。所有留白都从同一把尺子里取，而不是随手写数值，疏密节奏才稳定；间距同时承担分组，间距越大，元素之间的关系越疏远。
基础相似概念一段文字每行容纳的字符数，决定眼睛回行是否省力。舒适区大约 45～75 个拉丁字符（中文 28～40 字），最常用 65ch 左右。行太窄回行太频繁，太宽则跟丢行；用 max-width 以 ch 为单位控制，比按像素猜更可靠。
基础搭配使用