clamp()是最简洁可靠的响应式字体方案，但需确保中间值含vw且三参数区间经视口反推验证；calc()可用但禁止混用rem与vw，否则无效。
直接说结论：用 clamp() 是当前最简洁可靠的方案，但必须确保中间值含 vw（或 vh），且三参数区间经得起视口宽度反推；calc() 可用，但不能混用 rem 和 vw，否则无效。
为什么写了 clamp(16px, 2.5vw, 24px) 却没看到字体变大
因为中间值 2.5vw 在多数常见宽度下根本没生效——它只在特定区间内起作用：
- 算出最小生效宽度：
16px / 2.5vw = 640px→ 小于 640px 时，永远取16px - 算出最大生效宽度：
24px / 2.5vw = 960px→ 大于 960px 时，永远取24px - 真正线性变化的区间只有
640px–960px，窄得超出预期 - 在 iPhone SE（375px）上，
2.5vw = 9.375px，远低于16px，所以字体卡死不动
怎么配出真正能流动的 clamp() 值
别凭感觉填数字，按你设计稿锚点反向计算：
- 假设你希望：375px 宽度下显示
18px，1440px 下显示22px - 斜率 =
(22 - 18) / (1440 - 375) * 100 ≈ 0.375→ 中间项用0.375vw - 偏移量 =
18px - 0.375vw × 375≈3.8px→ 换成0.24rem（以16px为基准） - 最终写成：
font-size: clamp(1.125rem, 0.375vw + 0.24rem, 1.375rem) - 注意：
0.375vw + 0.24rem是非法语法，必须用calc()包裹：calc(0.24rem + 0.375vw)
calc() 里哪些写法会直接失效
calc() 对单位类型极其敏感，以下写法在所有浏览器中都不起作用：
立即学习“前端免费学习笔记（深入）”；
-
font-size: calc(1rem + 1vw)——rem和vw基准不同，CSS 规范禁止加减 -
font-size: calc(1em + 1vw)—— 同理，em依赖父级，不可与视口单位混合 -
font-size: calc(16px + 1vh)—— 虽然合法，但vh随滚动变化，会导致文字跳动，不推荐用于正文 - 安全写法只有：
calc(16px + 0.25vw)、calc(1rem + 0.25vw)（前提是根元素font-size固定为16px）
兼容性和降级必须手动写，工具不会帮你兜底
clamp() 在 Safari ≤ 13.1（即 iOS ≤ 13.4）完全不支持，而且 postcss-preset-env 等构建工具无法自动转译为媒体查询。唯一可靠方式是显式降级：
- 顺序不能错：先写 fallback，再写
clamp() - 正确写法：
font-size: 18px; font-size: clamp(16px, 3.8vw, 22px); - 如果想更保险，加上
@supports判断：@supports (font-size: clamp(1rem, 1vw, 2rem)) { ... } - 别指望
min-font-size或max-font-size—— 这俩不是标准 CSS 属性，纯属误传
真正难的不是写出一行 clamp()，而是确认它在 320px 到 1920px 所有设备上都落在可读区间内；小屏下限太低会糊，大屏上限太高会撑裂布局，而中间那段“流动区间”稍不留神就窄到形同虚设。
