唯一可靠方案是先写静态 font-size 再紧接 clamp() 实现层叠覆盖，旧浏览器跳过 clamp() 用第一行，新浏览器覆盖生效；禁用 @supports 检测因其在 ios 13.0–13.3 等环境存在误判或静默丢弃问题。
直接给 fallback：先写静态 font-size，再紧跟着写 clamp()，旧浏览器只读第一行，新浏览器用第二行覆盖——这是唯一可靠、无需 JS、不依赖 @supports 的方案。
为什么不能靠 @supports 检测来兜底
@supports (font-size: clamp(0px, 0px, 0px)) 看似严谨，但实际踩坑极多：
- iOS 13.0–13.3 的 Safari 会通过检测，却在运行时静默丢弃整条
clamp()声明，导致文字突然变小甚至布局塌陷 - 微信 X5 内核（Android 8–9 常见）和部分 Android WebView 4.4–6.0 不识别该函数，
@supports返回false，但你若把降级样式全塞进块里，旧浏览器根本看不到 - 检测写成
@supports (clamp: 0)或@supports (font-size: clamp())会被 Safari 12.1 误判为 true，结果启用后直接空白
必须用层叠顺序实现降级
浏览器按 CSS 层叠规则解析，后声明覆盖前声明。所以正确写法只能是：
h1 {
font-size: 1.125rem; /* 先写纯 rem/px，安全、可读、无 calc() */
font-size: clamp(1rem, 0.75rem + 0.5vw, 1.5rem); /* 再写 clamp() 覆盖 */
}
- 旧浏览器（IE、Edge 18、iOS 12、X5 内核等）完全不识别
clamp()语法，整行跳过，只应用第一行 - 新浏览器读到第二行，覆盖第一行，实现流体效果
- 第一行绝不能是
calc()、var(--size)或em，否则在无 JS 的纯 CSS 环境下可能计算失败或继承异常
当 clamp() 确实不可用时，min()/max() 是次优替代
如果目标环境明确老旧（如政务内网、银行系统），且已确认 clamp() 和 @supports 都不稳定，可用函数组合模拟：
font-size: max(1rem, min(2.5vw, 1.5rem));
- 行为上等价于
clamp(1rem, 2.5vw, 1.5rem)，但兼容性略好（Chrome 79+/Firefox 75+/Safari 13.1+ 支持） - 仍需前置 fallback：
font-size: 1.125rem;，因为 IE 和旧 WebView 同样会忽略整条min()/max()声明 - 禁用单位混用：不要写
min(1rem, 2vw, 24px)，三者单位不统一时 Safari 12 下可能解析失败
最常被忽略的点是：所谓“不支持”不是值没生效，而是整条声明被 CSS 解析器当作非法语法跳过——这意味着你不能指望它“悄悄退化”，必须用层叠顺序主动提供可见、稳定、无副作用的基础值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
