响应式单位

响应式尺寸来自不同参考系。% 通常相对于父容器，vw 和 vh 相对于视口，rem 相对于根字体，em 相对于当前元素的字体，ch 近似字符宽度。选择单位前先说清楚“尺寸应该跟谁一起变化”。

:root { font-size: 100%; }
.page { padding-inline: clamp(1rem, 4vw, 4rem); }
.reading { max-inline-size: 65ch; }

clamp(min, preferred, max) 允许尺寸在范围内流动，避免把每个宽度都切成断点。视口单位在移动浏览器地址栏变化时还可能表现不同，涉及全屏或动态工具栏时要根据宿主支持选择 svh、lvh 或 dvh，不能把 100vh 当成所有设备的固定可见高度。

实验与练习

给容器分别使用 %、rem、vw 和 ch，改变父容器、根字体与视口，记录哪个量变化。用 clamp() 做一段标题和内边距，在最小、中间和最大宽度记录计算结果，确认没有无限放大或缩小。

可运行微实验：主题闭环

建立一个父容器、一个标题和一段 65ch 正文，分别改变父宽度、根字体和视口，记录 %、rem、vw、ch 的计算值。用 clamp() 验证最小、流动、最大三个边界。

常见错误

• 把 em 和 rem 混为同一参考系。
• 用 100vw 造成滚动条出现时的水平溢出。
• 只用视口单位，却不限制长文本的阅读宽度。
• 把 vh 当成移动浏览器永远稳定的可见高度。

继续阅读

下一篇将单位、网格和最大宽度组合成流式布局：流式布局。

练习

1. 用最小输入复现“响应式单位”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案