clamp()在旧浏览器中整条font-size声明被丢弃，退至16px；@supports正确写法是(font-size: clamp(0px, 0px, 0px))，兜底值须为纯rem/px且置于@supports之前。
clamp() 在旧浏览器里不是“不生效”，而是整条 font-size 声明被直接丢弃，字体退回到浏览器默认的 16px —— 这会导致关键文字突然变小、布局错位甚至塌陷。
为什么 @supports 检测总写不对？
常见错误是写成 @supports (clamp: 0) 或 @supports (font-size: clamp())，这两种都不可靠：
-
@supports (clamp: 0)在 Safari 12.1 会误判为true，结果启用clamp()后样式空白或崩溃 -
@supports (font-size: clamp())语法非法，检测直接失败 - 真正能反映运行时可用性的写法只有：
@supports (font-size: clamp(0px, 0px, 0px))—— 三个参数必须带单位（0px，不能是0），否则某些 WebView 会通过检测但运行时报错
兜底值必须写在 @supports 块之前
很多人把降级样式塞进 @supports 块里，或者写在 clamp() 后面，结果旧浏览器根本看不到，新浏览器又被覆盖。正确顺序只能是：
h1 {
font-size: 1.125rem; /* 先写静态兜底，安全、可读、无 calc() 或变量 */
}
@supports (font-size: clamp(0px, 0px, 0px)) {
h1 {
font-size: clamp(1.125rem, 4vw, 1.75rem); /* 再放 clamp() 覆盖 */
}
}
- 兜底值不能是
calc()、var(--size)或em，必须是纯rem或px - 顺序不能颠倒：CSS 层叠规则决定了后写的声明覆盖前一条，所以
clamp()必须放在后面 - 不支持的环境（如 iOS 12、微信 X5 内核、Android WebView 4.4–6.0）会跳过整条
clamp()声明，只读到前面那行
当 @supports 不够稳，就换 min()/max() 或媒体查询
如果目标环境明确老旧（比如政务内网、银行系统要兼容 IE/Edge 18 或 iOS 12），@supports 可能仍不可信，就得绕开函数：
- 用
max(min())组合：font-size: max(1rem, min(4vw, 1.75rem));—— 行为与clamp()一致；不支持时整条被忽略，靠前面兜底生效 - 用媒体查询分段模拟：
font-size: 1rem;+@media (min-width: 640px) { font-size: calc(1rem + 0.5vw); }+@media (min-width: 960px) { font-size: 1.75rem; } - 计算临界点时注意：假设
clamp(1rem, 4vw, 1.75rem)，1rem = 16px，1.75rem = 28px，则 4vw = 16px 对应视口宽度为 400px，4vw = 28px 对应 700px —— 这两个断点就是媒体查询的锚点
最常被忽略的不是怎么写 clamp()，而是没验证 preferred 值是否真正在 min 和 max 之间浮动——比如 2.5vw 在 iPhone SE 上只有 ~9.4px，远低于 1rem，字体永远卡死在最小值，所谓“响应式”根本没启动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
