clamp() 仅做区间裁剪，要求 min ≤ preferred ≤ max 且单位可比，否则声明被静默丢弃；首选值须含动态单位，实际生效区间由交点计算得出；line-height 应用无单位值或同步 clamp()；旧浏览器需手动降级。
clamp() 不是自动适配开关，它只做区间裁剪——填错数值关系或单位，整条声明会被浏览器静默丢弃，回退到默认字号。
clamp() 三个参数怎么填才不被忽略
浏览器要求 min ≤ preferred ≤ max，否则直接跳过该声明。常见翻车写法：clamp(16px, 2vw, 12px)（最大值比最小值小）、clamp(1rem, 2em, 1.5rem)（em 依赖父级，无法与 rem 可比）。必须保证三者单位可比：全用 px、全用 rem，或 preferred 用 vw + px/rem 组合（需包裹在 calc() 中）。
- 最小值设为可读底线，比如
14px或0.875rem（对应 14px） - 最大值设为布局上限，比如
28px或1.75rem，别盲目填3rem - 首选值必须含动态单位，纯
20px就等于固定值，失去响应意义
为什么 font-size: clamp(16px, 2.5vw, 24px) 在 iPhone SE 上没变化
因为 375px 屏宽下 2.5vw = 9.375px，低于最小值 16px，浏览器直接取 min，字体始终卡在 16px。这不是 bug，是设计行为。真正起作用的区间由两个交点决定：
- 最小生效宽度 =
16px / 2.5vw × 100 = 640px（小于它就恒取 min） - 最大生效宽度 =
24px / 2.5vw × 100 = 960px（大于它就恒取 max） - 实际线性变化仅发生在 640px–960px，窄得超出预期
想拓宽活动区间，得改首选值：比如 clamp(14px, calc(12px + 0.25vw), 28px)，让小屏起点更高、大屏上限更远。
立即学习“前端免费学习笔记（深入）”；
line-height 和 clamp() 配合时最常踩的坑
clamp() 只控制 font-size，但 line-height 若写死像素值（如 line-height: 20px），会导致小屏行高过大、大屏行高过紧。更糟的是写成 line-height: 1.4em——em 会随 font-size 变，但基线可能偏移。
- 首选方案：用无单位值，如
line-height: 1.4，它是当前字号的倍数，天然同步缩放 - 若必须用像素或 rem 控制精确高度，也得用
clamp()同步：比如line-height: clamp(1.2, 1.4, 1.6) - 避免
line-height: normal，它由字体族决定，默认比例不可控
旧 Safari 和安卓 WebView 的降级必须手动写
Safari ≤ 13.1（即 iOS ≤ 13.4）完全不支持 clamp()，某些 Android 8–9 的 WebView 解析不稳定，@supports 判断不能替代真实降级。
- 必须前置 fallback：先写
font-size: 18px，再写font-size: clamp(16px, 3.8vw, 22px) - 不要用 CSS-in-JS 动态拼接
clamp()字符串，构建工具可能转义出错，尤其含括号或空格时 - 关键文字（如按钮文案）别只靠
clamp()保可读性，要配合min-width或text-overflow防截断
真正难的不是写出一行 clamp()，而是验证它在 320px 到 1920px 所有宽度下，输出值都落在可读、不撑裂、不糊眼的区间里——这需要实测，不是靠公式推导就能闭眼过关的。
