clamp() 在旧环境不被解析会导致样式丢失，fallback 必须前置声明；可用 max(min()) 模拟但需单位统一；iOS 12.0 等极旧环境应退至媒体查询。
clamp() 在 iOS 12.1 及更早、Android 4.4 WebView、微信 X5 内核等环境里根本不会被解析，整条声明直接丢弃——你看到的不是“没生效”，而是 fallback 没写，浏览器退到了继承值或默认 16px。
为什么 fallback 必须写在 clamp() 前面
老版本 Safari 以及大多数 WebView 解析器有个很典型的问题：一旦碰到自己不认识的函数，比如 clamp()，它不会“部分理解”，而是直接把整条 CSS 声明整个跳过。也就是说，如果代码只写了：font-size: clamp(1rem, 2.5vw, 1.5rem);
这类浏览器基本会把这一行当成没写过，最后要么继承父元素的字号，要么退回浏览器默认值。结果是什么？字体很可能小到 10px，也可能直接放大到 32px，版式一下子就失控了。
正确顺序只能是：
h1 {
font-size: 1.5rem; /* 兜底值，老浏览器能读到 */
font-size: clamp(1rem, 2.5vw, 1.5rem); /* 新浏览器覆盖 */
}- 顺序不能颠倒：CSS 层叠规则决定了后声明覆盖前声明
- 不要用
@supports (font-size: clamp())包裹——iOS 13.0 能识别@supports却不支持clamp()，结果 fallback 被跳过，反而更糟 - 兜底值建议用
rem（如1.5rem），兼顾可访问性缩放；避免纯px在高倍屏下失真
如何用 min()/max() 组合安全模拟 clamp()
部分环境（如 Safari 12.1+）虽不支持 clamp()，但已支持 min() 和 max()。这时可用 max(min()) 等价替换，但必须避开单位混用和非法表达式。
更稳妥的写法是这样理解：
如果写成 font-size: min(1rem, 2vw, 1.5rem);，在 Safari 12 里会直接解析失败。
换成 font-size: max(1rem, min(2.5vw, 1.5rem)); 就没这个问题了，而且实际表现与 clamp(1rem, 2.5vw, 1.5rem) 保持一致。
min()和max()的每个参数必须是合法长度值，禁止混用%或无单位数字- 首选值仍推荐用
vw+rem组合（如1.125rem + 0.3vw），避免纯vw在小屏跌破最小值 - 该写法在 Chrome 79+、Firefox 75+、Safari 12.1+ 可用；若目标环境含 Safari 12.0 或更低，则必须退回媒体查询
什么时候该放弃函数降级，直接上媒体查询
如果你的项目明确要兼容 iOS 12.0、Android 4.4 WebView 或微信 X5 内核（v6.8 以下），min()/max() 也不可靠——这些内核对函数解析极不稳定，甚至会把整条规则当语法错误丢弃。
此时最稳方案是分段媒体查询：
p {
font-size: 1rem;
}
@media (min-width: 640px) {
p {
font-size: calc(1rem + 0.25vw);
}
}
@media (min-width: 1024px) {
p {
font-size: 1.25rem;
}
}- 断点选
640px（常见平板窄屏）、1024px（桌面窄屏）足够覆盖主流设备 - 用
calc()在中间区间做线性插值，比阶梯式更平滑 - 所有单位统一用
rem或px，避免em在嵌套中放大误差
真正容易被忽略的不是怎么写新特性，而是降级时单位是否统一、顺序是否正确、以及目标环境是否真的支持你选的“备选函数”。很多线上故障，根源在于开发者误以为 min() 是 clamp() 的无缝替代——它只是多一层兼容，不是万能胶。
