clamp()在旧版浏览器中因语法不识别被整条规则丢弃，需用@supports(font-size: clamp(0px,0px,0px))检测，降级应先写静态兜底值再@supports内写clamp()。
clamp() 在旧版移动浏览器里不是“无效”，是整条声明被丢弃
很多开发者看到字体变小、宽度塌陷，第一反应是“clamp()没生效”，其实更准确的说法是：Safari 12.1、Android WebView 4.4–6.0、微信 X5 内核等环境根本**不识别这个函数语法**，CSS 解析器直接跳过整条规则——font-size: clamp(1rem, 2.5vw, 1.5rem) 这一行被当作文本忽略，浏览器回退到继承值或默认值（比如 16px），布局可能瞬间错乱。
这不是兼容性“差”，而是语法层面的不支持。所以不能指望加个 !important 或调顺序来修复。
@supports 检测写法必须带完整调用形式
常见错误是写成 @supports (clamp: 0) 或 @supports (font-size: clamp())，这两种都不可靠：
- Safari 12.1 会误判
@supports (clamp: 0)为 true，结果启用clamp()后报错或样式空白 -
@supports (font-size: clamp())语法不合法，检测直接失败
真正能反映运行时可用性的写法只有：
立即学习“前端免费学习笔记（深入）”；
@supports (font-size: clamp(0px, 0px, 0px)) —— 用于字体、行高、内边距等文本类属性@supports (width: clamp(0px, 0px, 0px)) —— 更通用，适配容器宽、gap、padding 等
注意：三个参数必须带单位（0px，不能是 0），否则某些 WebView 会通过检测但运行崩溃。
用 min() 和 max() 组合模拟 clamp() 的真实写法
clamp(MIN, VAL, MAX) 等价于 max(MIN, min(VAL, MAX))，但直接套用会踩坑：
- IE 和部分旧 Android WebView 不支持
min()/max()，需提供基础回退（如font-size: 1.5rem） - 不能混用单位做比较，比如
min(1rem, 2vw, 24px)在 Safari 12 下可能解析失败 -
min()里放百分比容易误判：写min(100%, 768px)实际依赖父容器宽，不是视口
安全写法是拆开、分层、单位统一：
font-size: max(1rem, min(2.5vw, 1.5rem));
这行在支持 min/max 的浏览器中行为与 clamp() 一致；不支持时，整条被忽略，靠前面的兜底生效。
如果目标环境明确不支持（比如内网系统要兼容 iOS 12），建议跳过函数组合，直接用媒体查询分段：font-size: 1rem;@media (min-width: 640px) { font-size: calc(1rem + 0.5vw); }@media (min-width: 960px) { font-size: 1.5rem; }
最容易被忽略的降级顺序和单位陷阱
很多人把兜底样式写在 @supports 块里面，或者写在后面，结果旧浏览器看不到，新浏览器又被覆盖。正确顺序只能是：
h1 { font-size: 1.5rem; /* 所有浏览器都执行 */ }@supports (font-size: clamp(0px, 0px, 0px)) { h1 { font-size: clamp(1rem, 2.5vw, 1.5rem); /* 仅新浏览器执行 */ }}
另外，基础值（即兜底值）必须是静态、无计算、单位明确的，比如 1.5rem 或 24px，不能是 calc(1rem + 2px) 或 env(safe-area-inset-top)——旧浏览器无法解析这些，会导致整条规则失效。
