用 clamp() 替代多段媒体查询可行但需严谨：三参数单位须可比（min/max 用 rem/px，preferred 含 vw/calc），必须加降级和 text-size-adjust: 100%，并反推系数对齐设计稿锚点，否则字体“卡死”或模糊。
直接说结论：用 clamp() 替代多段媒体查询是可行的，但必须写对三参数单位组合、加降级、实测边界值——否则字体不是“流式”，而是“卡死”或“忽大忽小”。
为什么 font-size: clamp(1rem, 2.5vw, 2rem) 在 iPhone 上看起来太小？
因为 2.5vw 在 375px 宽度下 ≈ 9.4px，远低于 1rem（通常 16px），浏览器直接取 min 值，但你没意识到这个“min”在高 DPR 屏上渲染模糊，且未适配用户系统字号偏好。
- 根本问题不在函数本身，而在
2.5vw这个系数未经锚点反推——它没对齐你设计稿里 375px 对应的真实字号（比如 18px） - 更稳妥的写法是
clamp(1rem, calc(1rem + 0.5vw), 2rem)：固定偏移 + 线性增长，避免小屏掉出下限 - 务必加
text-size-adjust: 100%，防止 iOS Safari 自动缩放干扰计算
clamp() 的三个参数单位怎么配才不翻车？
顺序是 min、preferred、max，单位必须可比、不能混用弹性嵌套（如 em 套 vw）；min 和 max 推荐用 rem 或 px，preferred 必须含 vw 或 calc() 表达式。
- 错误示范：
clamp(1rem, 2.5vw, 2.5rem)—— 小屏时2.5vw可能 1rem，字体卡死，失去流体感 - 正确思路：先定两个锚点（如 375px → 18px，1440px → 36px），算斜率 ≈ 0.01607，转为 vw 是 1.607vw，截距 ≈ 12.86px，最终写成
clamp(1.125rem, 12.86px + 1.607vw, 2.25rem) - 别用
em：它继承父级字号，嵌套后计算失控；也别把max设成4vw，宽屏下可能反低于preferred，导致字体跳变
旧版 Android WebView 和 Safari 怎么 fallback 才真正生效？
@supports 检测无效，老 WebView（Android 9 及更早）和 Safari ≤13.1 会整条忽略 font-size: clamp(...) 声明，而不是报错或降级。唯一可靠方式是层叠写法：先写基础值，再覆盖 clamp()。
- 正确降级：
font-size: 1.125rem; font-size: clamp(1.125rem, 12.86px + 1.607vw, 2.25rem); - 错误做法：把降级样式塞进
@supports块里，或依赖 JS 动态注入——不支持的环境根本不会执行那条规则 - Safari 13.1–13.3 还有解析 bug：避免
clamp(var(--a), var(--b), var(--c))或多层嵌套calc()，改用扁平表达式如calc(1rem + 0.25vw)
line-height 跟着 font-size 流体变化，为什么不能也用 clamp()？
可以，但极易出问题：如果 line-height: clamp(1.2, 1.3vw, 1.6)，小屏时 1.3vw 可能
- 最安全做法：
line-height: 1.4（无单位值），它会随font-size自然缩放倍数 - 若需像素级控制（如图标对齐），
line-height的clamp()范围必须极窄，例如clamp(1.35, 1.4, 1.45)，避免抖动 - 切忌设
line-height: normal，它由字体族决定，默认比例不可控，无法响应式
真正难的不是写出那行 clamp()，而是确认 min 是否真能在 320px 屏上清晰辨认字形，max 在 4K 屏上是否还留有足够垂直空间——这些没法靠 DevTools 数值判断，得拿真机横竖屏反复测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
