在传统的响应式网页开发中，工程师通常使用媒体查询（@media）在 768px、1024px、1440px 等几个固定断点上生硬地切换标题字号。这种方式不仅代码冗余，而且在折叠屏手机、小尺寸笔记本或超宽带鱼屏等中间尺寸视口上，经常出现标题突然跳变或意外折行的问题。
流体排版（Fluid Typography）通过 CSS 原生的 clamp(MIN, VAL, MAX) 函数，让字体大小在最小视口（如 375px 手机）和最大视口（如 1440px 桌面）之间实现平滑的线性缩放，并在超出两端边界时自动锁定字号上下限。
一、 为什么不能直接用纯 vw 作为首选值？
许多初级教程会写出类似 font-size: clamp(1.5rem, 4vw, 3rem) 的代码。这种写法存在一个严重的无障碍缺陷：因为中间的首选值 4vw 完全依赖视口宽度（Viewport Width），当视力受损的用户在浏览器中按 Ctrl/Cmd + 将页面放大到 200% 时，vw 单位不会响应浏览器的字体缩放指令，导致文字无法放大，直接违反 WCAG 2.1 AA 级标准（准则 1.4.4 文本缩放）。
正确的工程实践是将首选值写为 rem + vw 的复合表达式，例如：
/* H1 主标题：在 375px 视口下为 32px (2rem)，在 1440px 视口下平滑过渡至 56px (3.5rem) */
h1 {
font-size: clamp(2rem, 1.47rem + 2.25vw, 3.5rem);
line-height: 1.15;
}
这样既保留了随屏幕宽度平滑响应的特性，又能完全响应用户在浏览器设置中调整的基础字号与页面缩放。
二、 界面设计系统的四级流体字号推荐表
在 JVDS界达设计 的 响应式网站开发 规范中，我们通常不建议让所有小字都随视口剧烈变化，而是对展示级标题采用较大的缩放斜率，对正文保持极小的缩放斜率以确保阅读稳定性：
| 文本层级 | 移动端下限（375px） | 桌面端上限（1440px） | 推荐 CSS clamp() 表达式 |
建议行高（Line-Height） |
|---|---|---|---|---|
| Display / 首屏大标题 | 32px (2.0rem) |
56px (3.5rem) |
clamp(2rem, 1.47rem + 2.25vw, 3.5rem) |
1.15～1.2 |
| H2 / 模块主标题 | 24px (1.5rem) |
36px (2.25rem) |
clamp(1.5rem, 1.24rem + 1.13vw, 2.25rem) |
1.25～1.3 |
| H3 / 卡片标题 | 18px (1.125rem) |
22px (1.375rem) |
clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem) |
1.35～1.4 |
| Body / 正文段落 | 16px (1.0rem) |
18px (1.125rem) |
clamp(1rem, 0.96rem + 0.19vw, 1.125rem) |
1.65～1.75 |
三、 配合 max-width: 65ch 控制最佳阅读行宽
字体平滑放大后，如果段落容器在大屏幕上无限拉宽，一行文字超过 90 个字符会导致读者视线换行困难。因此，正文容器应同步配合 max-width: 60ch～70ch（或中文每行控制在 32～42 个汉字），让流体字号与最佳阅读行宽协同工作。
