clamp()在旧浏览器中整条font-size声明被丢弃，字体退回16px；@supports必须写为(font-size: clamp(0px, 0px, 0px))，兜底值须前置且为纯rem/px，不支持时可改用max(min())或媒体查询。
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 —— 这两个断点就是媒体查询的锚点
最常被忽略的是 preferred 值是否真正在 min 和 max 之间浮动
比如 2.5vw 在 iPhone 上可能始终卡在 min，原因常是缺失 <meta name="viewport" content="width=device-width, initial-scale=1"> —— 缺失该标签时，Safari 可能延迟解析 vw，导致首选值无法随视口变化。单位混用（如 clamp(1rem, 2.5vw, 40px)）也会让浏览器无法统一换算，直接丢弃整条声明。
