老旧浏览器直接丢弃 min()/max() 声明，必须将静态兜底值（如 width: 300px）写在函数声明（如 width: min(300px, 50vw)）之前；@supports 检测须用 @supports (width: min(0px, 0px))，且不能替代前置兜底。
老旧浏览器（如 IE11、Safari 12.1 之前、Android WebView 4.4–6.0、微信 X5 内核）根本不会解析 min() 和 max()，整条 CSS 声明被直接丢弃——不是“没生效”，是压根没读。修复核心就一条：静态兜底必须写在前面，且不能依赖变量或 @supports 块内包裹。
兜底值必须写在函数声明之前
浏览器按顺序解析 CSS，遇到不识别的函数就跳过整行。所以顺序决定一切：
-
width: 300px;→ 旧浏览器执行这一行，新浏览器也执行，但会被下一行覆盖 -
width: min(300px, 50vw);→ 新浏览器覆盖上一行，旧浏览器直接忽略这行，不影响前一行 - 反过来写（
min()在前、静态值在后）会导致新浏览器取错值，旧浏览器完全看不到兜底 -
var(--w, 300px)或calc()插入兜底无效：IE 连var()都不认，整条声明丢弃
@supports 检测必须带完整调用形式
错误检测方式会让样式在 Safari 12.1 等环境误启用，结果空白或崩溃：
- ❌
@supports (min: 0)：Safari 12.1 会返回true，但运行时失败 - ❌
@supports (width: min())：语法非法，检测直接不执行 - ✅ 正确写法：
@supports (width: min(0px, 0px))—— 三个参数都带单位（0px，不能是0），否则某些 WebView 会通过检测但运行时报错 - 注意：
@supports块只用于增强，不能替代前置兜底；它只是给支持者加更精细控制
避免单位混用和上下文陷阱
min()/max() 不是万能缩放器，单位不一致或锚点错误会导致逻辑失效：
-
min(100%, 768px)无效：因为100%相对父容器，不是视口；应改用min(100vw, 768px) -
min(1rem, 2vw, 24px)在 Safari 12 下可能静默失败：不同单位无法跨上下文比较，浏览器拒绝解析 -
min-width: min(320px, max(20vw, 100%))错误：该属性不接受函数表达式，整条规则被忽略 - 调试时看 DevTools 的 Computed 面板值，而不是 Styles 面板里写的原始表达式
明确老旧环境就别用函数，改用媒体查询分段
如果目标用户大量使用 iOS 12、安卓 4.4–6.0 或内网 IE11，强行降级反而增加维护成本：
- 字体示例：
font-size: 1rem;→@media (min-width: 640px) { font-size: calc(1rem + 0.5vw); }→@media (min-width: 960px) { font-size: 1.5rem; } - 宽度示例：
width: 300px;→@media (min-width: 640px) { width: calc(300px + 2vw); }→@media (min-width: 1024px) { width: 50vw; } - 媒体查询兼容性远高于函数，且可预测；尤其适合需要稳定渲染的后台系统或政企内网
最容易被忽略的是：兜底不是“加个 @supports 就完事”，而是“静态值必须出现在第一行”；以及单位必须统一、锚点必须明确——否则你写的 min() 在 Safari 15.3 看似有效，到了 Safari 12.1 就彻底消失，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
