clamp() 要生效，preferred 值必须在某视口≥min、另一视口≤max，如 clamp(1rem, calc(0.8rem + 1.2vw), 1.5rem)；单位需统一（推荐全 px），并前置 fallback，line-height 应用无单位值或同步 clamp。
直接用 font-size: clamp() 就能实现，但绝大多数人填错第二参数（preferred），导致小屏字太小、大屏卡死、Safari 里完全不生效——这不是浏览器问题，是参数逻辑没对齐。
为什么 clamp(1rem, 2.5vw, 2rem) 在 iPhone 上字体不动？
因为 2.5vw 在 375px 屏上 ≈ 9.4px，远低于 1rem（通常 16px），浏览器按规则取 max(min, min(preferred, max))，结果永远是 1rem。它不是“不工作”，而是 preferred 值根本没进入插值区间。
要让它动起来，preferred 必须在某个视口宽度下 ≥ min，在另一个宽度下 ≤ max：
- 别写
clamp(1rem, 2.5vw, 2rem)—— preferred 缺少基底，小屏段必然锁死 - 改用
clamp(1rem, calc(0.8rem + 1.2vw), 1.5rem)：0.8rem 是锚点，1.2vw 是斜率，320px 时≈15.2px，已接近可读下限 - 实测验证点：拉窗口到 320px、768px、1440px，看 computed 样式里的像素值是否连续递增
clamp() 三个参数单位怎么配才不被浏览器静默忽略？
min 和 max 必须是长度单位（px、rem、em），preferred 可含计算，但所有单位必须可比对。混用 rem 和 vw 在 Safari 旧版中极易失效。
- 最稳方案：
clamp(16px, 4vw + 12px, 24px)—— 全px，无继承干扰，安卓 WebView 也兼容 - 适配系统字号方案：
clamp(1rem, calc(0.75rem + 0.375vw), 1.5rem)—— 前提是html { font-size: 16px; } - 绝对不要：
clamp(1rem, 2.5vh, 2rem)（字体不该随滚动变）、clamp(14px, 2em, 18px)（em 依赖父级，不可控）
旧浏览器 fallback 怎么写才真起作用？
只写一行 font-size: clamp(...)，iOS 13.3、Android 9 WebView 等会直接跳过整条声明，回退到浏览器默认 16px，排版全乱。
- 必须前置降级：
font-size: 1.25rem; font-size: clamp(1rem, calc(0.75rem + 0.375vw), 1.5rem); - 别用
@supports (font-size: clamp(0,0,0))包裹——构建工具可能提前编译掉，且部分 WebView 不识别该语法 - 关键按钮、标题等核心文本，别只靠
clamp()保可用性；加min-width或text-overflow防截断
line-height 不同步会导致文字挤在一起
clamp() 只改 font-size，如果 line-height 写死 20px 或用 em 但基线偏移，小屏下行高会塌缩，阅读吃力。
- 首选无单位值：
line-height: 1.5—— 它自动乘以当前font-size，天然联动 - 如需更精细控制，给
line-height也套一层：line-height: clamp(1.4, 0.2vw + 1.3, 1.6) - 避免
line-height: 1.5em：em 在嵌套或父级font-size变更时行为不稳定
真正难的不是写出 clamp()，而是算出那个让 preferred 在 min/max 之间“刚好浮起来”的系数——它取决于你的最小视口、根字号、设计稿断点，而不是抄来就用。每次改完，务必用设备模拟器拖到 320px 拉一遍，看 computed font-size 是否从 min 开始缓慢爬升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
