clamp() 在小屏无变化是因首选值未落入 min/max 区间，需用 calc() 构建线性表达式（如 calc(0.8rem + 1.2vw)）使其随视口平滑过渡；min/max 必为长度单位，首选值单位须兼容；降级需前置基础值、后置 clamp()；line-height 推荐无单位数值以自动适配。
font-size: clamp() 为什么在小屏上没变化？
因为首选值（第二个参数）没真正“动起来”。比如 clamp(1rem, 2.5vw, 2rem) 在 375px 屏上算出来是 9.4px，远低于 1rem（16px），浏览器直接取最小值，字体就卡死不动——这不是 bug，是 clamp 的设计逻辑：它只在首选值落在 min/max 之间时才插值。
要让它动，得让首选值在某个视口宽度下刚好等于 min，在另一个宽度下逼近 max。推荐用 calc() 拆解线性表达式：clamp(1rem, calc(0.8rem + 1.2vw), 1.5rem)。其中 0.8rem 是基底，1.2vw 是斜率，能提前启动缩放，避免小屏段长时间锁死。
- 别写
clamp(16px, 20px, 24px)—— 首选值固定，永远不响应 - 别依赖
em在首选值里，它会继承父级 font-size，嵌套时结果不可控 - 实测关键点：拉浏览器到 320px、768px、1440px，看 computed 样式里的像素值是否平滑过渡
clamp() 的三个参数单位怎么配才不报错？
min 和 max 必须是长度单位（rem、px、em），不能是纯数字或 vw；首选值可含计算，但所有参与运算的单位必须兼容（rem + vw 合法，em + vw 易因继承链断裂失效）。
混用单位最常见后果是整条声明被浏览器静默忽略——尤其在旧 Safari 或安卓 WebView 里，你连 warning 都看不到。
立即学习“前端免费学习笔记（深入）”；
- 全用
px最稳妥：clamp(16px, calc(12px + 0.375vw), 24px) - 全用
rem更适配系统字号放大：clamp(1rem, calc(0.75rem + 0.375vw), 1.5rem) - 绝对不要写
clamp(1rem, 2.5vh, 2rem)—— 字体不该随滚动高度变化
旧浏览器 fallback 怎么写才真生效？
只写一行 font-size: clamp(...)，老设备（如 iOS 13.3、Android 9 WebView）会直接跳过整条规则，回退到浏览器默认 16px，非常危险。
真正有效的降级是利用 CSS 层叠机制：先写一个基础值，再用支持的 clamp() 覆盖它。浏览器不支持时自动忽略第二行，支持时后声明覆盖前声明。
h1 {<br> font-size: 1.25rem;<br> font-size: clamp(1rem, calc(0.8rem + 1.2vw), 1.5rem);<br>}
- 顺序不能反：降级值必须在前，
clamp()在后 - 别用
@supports (font-size: clamp(0,0,0))包裹——它在不支持环境里也返回 false，且无法触发层叠降级 - 如果用了 CSS 变量（如
var(--fs-h1)），旧 Safari 可能静默丢弃整个声明，建议生产环境优先写死数值
line-height 怎么跟 font-size 一起流式缩放？
clamp() 只管 font-size，但 line-height 不同步就会出问题：小屏字小行高却不变，文字挤成一团；大屏字大行高还固定，空隙过大。
最简单可靠的做法是用无单位数值，比如 line-height: 1.4——它天然相对于当前 font-size 计算，无需额外处理。
- 别写
line-height: 20px或line-height: 1.4em，前者不缩放，后者可能因 em 继承异常偏移基线 - 若需更精细控制（如标题行高比正文紧），可用
line-height: clamp(1.2, 1.3 + 0.1vw, 1.6)，但务必和 font-size 的视口区间对齐，否则不同步 - 按钮、卡片等复合组件，记得连
min-height、padding也一并用clamp()控制，否则视觉割裂
vw 永远按整个视口宽度算，如果元素在窄 sidebar、transform 容器或 flex 子项里，它的渲染宽度远小于视口，但 vw 值不变，结果就是字看起来“莫名其妙地大”。这时候该换 rem + 媒体查询，或者上 cqw（容器宽度单位），而不是硬调系数。 
