B02 单位与数学函数

摘要：px 固定，rem 跟随根字号，em 跟随父字号，% 跟随参照物，视口单位跟随窗口。选错单位会导致两种后果：用户改字号时页面不变，或嵌套组件的间距逐层放大。calc、min、max、clamp 则在单位之间做运算与限幅。
关键词：rem，em，视口单位，calc，clamp

所属：frontend/css / B-进阶 ｜ 上一篇：B01-层叠继承与优先级 ｜ 下一篇：B03-定位与层叠上下文

1 引言

单位的选择决定两件事：是否响应用户偏好、是否随上下文缩放。前者关乎无障碍，后者关乎组件复用。

本文给出单位对照与四个数学函数的用法。范围见表 1-1。

项	本文覆盖	本文不覆盖
绝对单位	px	打印单位 pt、cm
相对单位	rem、em、%、ch、ex	容器查询单位（C01）
视口单位	vw、vh、dvh、svh、lvh	视觉视口与动态视口差异细节
函数	calc、min、max、clamp	三角函数与自定义函数

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/units.html	编码 UTF-8
浏览器	Chrome 130+，Computed 面板	能看到计算后的像素值
前置	A04	会算盒模型尺寸

3 原理与实现

3.1 每个单位跟随谁

单位的差异只有一个：参照物是谁，如图 3-1 所示。

flowchart LR
    P["px"] --> P1["固定像素"]
    R["rem"] --> R1["根元素字号"]
    E["em"] --> E1["当前元素或父元素字号"]
    PC["%"] --> PC1["父元素对应维度"]
    V["vw / vh"] --> V1["视口尺寸"]
    D["dvh"] --> D1["动态视口，避开地址栏"]

图 3-1 常见单位的参照物

图上可见：em 的参照物会随嵌套变化，这是组件内间距被逐层放大的原因；rem 始终指向根字号。

3.2 四个数学函数

/* 运行环境：Chrome 130+；css-practice/units.css */
:root { font-size: 100%; }          /* 尊重用户设置，默认 16px */

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }

.container {
  width: min(100% - 2rem, 68rem);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

.hero { min-height: max(24rem, 60dvh); }

.sidebar { width: calc(100% / 3 - 1rem); }

单位使用建议见表 3-1。

场景	推荐单位	原因
字号	rem	跟随用户字号设置
间距	rem	与字号同步缩放
边框	px	1 像素边框在高倍屏更清晰
组件内相对	em（谨慎）	随组件字号缩放
容器宽度	min() + %	兼顾最大宽度与小屏留白
整屏高度	dvh	避开移动端地址栏
渐变标题	clamp()	平滑变化，避免跳档
行宽	ch	按字符数控制可读性

数学函数与用途见表 3-2。

函数	作用	示例
calc()	混合单位运算	calc(100% - 2rem)
min()	取小值	min(100%, 68rem)
max()	取大值	max(24rem, 60dvh)
clamp()	限定上下界	clamp(1.75rem, 1.2rem + 2vw, 2.5rem)

4 验证与讨论

1. 打开页面，在 Computed 面板查看标题字号的实际像素值。
2. 浏览器设置中调大默认字号（或临时把 :root 改为 20px），确认 rem 尺寸同步变化。
3. 把 clamp() 中间项去掉，标题在某宽度处出现跳变，对比差异。
4. 在移动端模拟器中滚动，观察 dvh 与 vh 下整屏高度的差异。

检查项	预期结果	说明
根字号联动	改根字号后间距同步缩放	rem
限幅生效	标题不超出上下界	clamp()
容器留白	小屏两侧有 1rem 留白	min(100% - 2rem, 68rem)
整屏高度	滚动时高度不跳动	dvh

讨论与局限。 em 在多层嵌套时会累积放大，组件内使用需明确参照对象。另 vw 包含滚动条宽度，横向溢出时建议改用 % 或 min()。

5 常见问题

现象	原因	处理
用户调大字号页面不变	全部使用 px	字号与间距改 rem
组件内间距越来越大	嵌套使用 em	改用 rem
移动端整屏高度跳动	使用 vh	改 dvh
calc 不生效	运算符两侧缺少空格	写成 calc(100% - 2rem)
小屏出现横向滚动	固定宽度容器	用 min(100% - 2rem, 68rem)

6 结论

序号	结论	依据
1	单位差异在于参照物	图 3-1
2	字号与间距用 rem，不响应 px 的做法	表 3-1
3	标题与容器用 clamp、min 限幅	表 3-2
4	整屏高度用 dvh	表 3-1

• 上一篇：B01-层叠继承与优先级
• 下一篇：B03-定位与层叠上下文
• 返回：B00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · CSS 值与单位，https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units（访问于 2026-10-31）
[2] CSS Values and Units Module Level 4，W3C，https://www.w3.org/TR/css-values-4/（访问于 2026-10-31）