clamp()三个参数必须经视口反推计算：以375px显示18px、1440px显示22px为例，斜率≈0.375vw，偏移量≈0.24rem，最终写为clamp(1.125rem, calc(0.24rem + 0.375vw), 1.375rem)，单位统一且中间值含动态成分。
clamp() 三个参数怎么填才不翻车
直接写 clamp(16px, 4vw, 24px) 很容易在 iPhone SE 上看到 10px 字体——不是函数失效，而是中间值根本没进入生效区间。关键不是“写出来”，是“算出来”：
- 先确定设计锚点：比如 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, calc(0.24rem + 0.375vw), 1.375rem)，注意calc()必须包裹混合单位表达式
别用 clamp(1rem, 1rem, 2rem) 这种写法——中间项没动态成分，等于白写。
为什么写了 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，字体卡死不动
测试时拉浏览器窗口到 320px、768px、1920px，用开发者工具的 Computed 面板看最终生效值，比凭感觉调数字靠谱得多。
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)（前提是 html { font-size: 16px }）。
旧版 Safari 兼容和降级必须手动写
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)) { ... } - 避免嵌套写法，如
font-size: clamp(var(--min), var(--pref), var(--max))—— Safari 13.1–13.3 可能静默丢弃
真正难的不是写出一行 clamp()，而是确认它在 320px 到 1920px 所有设备上都落在可读区间内；小屏下限太低会糊，大屏上限太高会撑裂布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
