clamp()三参数需min/max用绝对单位（px/rem）、preferred用px+vw组合，避免混用em/vw；安卓旧webview不支持时需层叠fallback；line-height宜用无单位值随font-size自然缩放。
clamp() 的三个参数到底怎么配？
直接说结论：clamp(min, preferred, max) 里，min 和 max 必须是绝对单位（如 rem、px），preferred 推荐用视口单位（vw）或相对单位（rem），但不能混用弹性单位（比如 em 套 vw）——否则计算会意外失准。
常见错误是写成 clamp(1rem, 2.5vw, 2.5rem)：当屏幕很小时，2.5vw 可能低于 1rem，但浏览器仍按 min 截断；问题在于 2.5vw 在小屏下太小，导致字体“卡死”在最小值，失去流体感。
- 先算出你希望覆盖的视口范围（比如
320px到1440px）和对应字体大小（比如1.125rem→2.25rem） - 用公式算斜率：
(maxSize - minSize) / (maxWidth - minWidth)，单位统一为px，再转成vw（除以 100） - 截距 =
minSize - slope × minWidth，这个值就是preferred的基础偏移（通常保留为rem或px）
例如：从 320px（18px）到 1440px（36px），斜率 = (36-18)/(1440-320) ≈ 0.01607，换算成 vw 是 1.607vw；截距 ≈ 18 - 0.01607×320 ≈ 12.86px。最终写成：clamp(1.125rem, 12.86px + 1.607vw, 2.25rem) —— 注意这里 12.86px 是固定偏移，不是 rem，避免缩放时二次放大。
为什么 font-size: clamp(...) 在某些安卓 WebView 里失效？
因为老版本 Android System WebView（尤其 Android 9 及更早）不支持 clamp()，它会直接忽略整条声明，回退到未设置的默认值（通常是 16px），而不是报错。
这不是 bug，是缺失特性。别指望加个 @supports 就能兜住——@supports (font-size: clamp(1rem, 1.5vw, 2rem)) 在不支持的环境里也返回 false，但你没法靠它“优雅降级”，因为降级样式得写在同一个规则里，而浏览器会整条跳过不支持的声明。
- 真正有效的 fallback 是用层叠：先写一行基础
font-size，再写clamp()覆盖它，不支持的浏览器就用前面那行 - 示例：
font-size: 1.125rem;<br>font-size: clamp(1.125rem, 12.86px + 1.607vw, 2.25rem);
- 不要用
calc()模拟clamp()，因为calc(12.86px + 1.607vw)没有上下限，小屏会缩到看不见
line-height 跟着 font-size 流体变化，但别用 clamp() 直接套
line-height 如果也用 clamp()，容易和 font-size 不同步——比如你设了 line-height: clamp(1.2, 1.3vw, 1.6)，但 1.3vw 在小屏下可能小于 1.2，导致行高“卡底”，文字挤在一起。
更稳的做法是让 line-height 保持无单位数值（即相对于当前 font-size 的倍数），然后靠 font-size 自身流体来带动它自然缩放：
- 写
line-height: 1.4（无单位），它会随font-size等比缩放，不需要额外响应式逻辑 - 如果必须微调节奏（比如大字时想略宽松），可用
line-height: calc(1.3 + 0.05 * (100vw - 320px) / (1440 - 320))，但这是高阶操作，多数场景没必要 - 绝对避免
line-height: clamp(1.2rem, 1.5vw, 1.6rem)——rem和vw混用会导致基准混乱
实际项目中，clamp() 字体要不要配合 rem 基准重设？
要，但只在根元素做一次，且必须用 px 固定值设定 font-size，否则 clamp() 里的 rem 会嵌套放大。
比如你在 :root 写了 font-size: clamp(16px, 2.5vw, 24px)，那所有 1rem 就是这个动态值——此时 clamp(1rem, ...) 里的 1rem 实际是“当前动态字号”，不是设计稿的 16px，容易失控。
- 推荐做法：根元素用固定
font-size: 16px（或100%），让1rem == 16px稳定不变 - 所有
clamp()中的min和max用rem（如1.125rem），preferred用px + vw组合，确保线性可预测 - 如果项目已用
html { font-size: 62.5% }（即1rem = 10px），那就统一按这个换算，别中途切
流体字体真正的复杂点不在函数本身，而在你是否清楚每个单位背后的计算基准——vw 是视口宽度，rem 是根字号，px 是绝对像素，三者一旦在同一个表达式里没对齐，结果就会漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
