响应式字号别再堆媒体查询：clamp() 与 Type Scale 一套搞定

约 7 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证

clamp() 的几何意义：三点定一条线

clamp(min, preferred, max) 的行为：视口很小时取 min，很大时取 max，中间沿 preferred 线性变化。想让字号在 360px 视口是 16px、在 1200px 视口是 22px，preferred 就必须是一条过这两点的直线——这就是所有公式生成器的原理。

目标：360px → 16px，1200px → 22px
斜率 slope = (22-16)/(1200-360) = 0.00714 px 视口
化为 vw：0.00714 × 100 / 100 → 0.714vw
截距 b = 16 - 0.714 × 3.6 = 13.43px → 0.84rem

h2 { font-size: clamp(1rem, 0.84rem + 0.714vw, 1.375rem); }

h1 { font-size: clamp(1rem, 2.5vw, 2rem); }   /* 可用但有缺陷 */
h1 { font-size: clamp(1rem, 0.9rem + 1.5vw, 2rem); } /* 推荐 */

/* 纯 vw 的 preferred 意味着：用户把浏览器默认字号
   从 16 调到 24，这段文字毫无反应——无障碍硬伤。
   rem 部分保证用户设置始终生效。 */

一套完整的字号阶梯

单条 clamp 很容易，工程化的问题是「标题和正文的比例在不同视口是否协调」。做法是固定两端各一套比例（如小屏 1.2 倍、大屏 1.25 倍的 minor third），每级都过一条自己的直线。生成的阶梯一次性贴进全局样式，之后再也不写字号媒体查询。

落地清单

1. 先定基准：正文小屏 16px 起、行高 1.5+，这是无障碍底线
2. 选两端比例（常见 1.2 / 1.25），确定 360px 与 1200px 两个端点——别用 0 到无穷大，区间越宽中段越不可控
3. 用工具生成每级的 clamp()，输出 CSS 变量或 Tailwind fontSize 配置
4. 全部字号走变量：font-size: var(--fs-lg)；审查时全局搜字面值 px 字号应为零
5. 缩放窗口实测两端点与中段，确认行高与截断没有破版

常见问题