旧浏览器直接忽略min()/max()整条声明，因其不支持css values and units level 4语法；正确降级需前置静态值、用@supports (width: min(0px, 0px))检测，并避免混用单位或变量插值。
因为旧浏览器压根不认识 min() 和 max() 这个语法，整条 CSS 声明被直接跳过，不是“没生效”，是“根本没读”。
旧浏览器如何处理不认识的函数
IE11、Safari 12.1 之前、Android WebView 4.4–6.0、微信 X5 内核等环境，CSS 解析器遇到 min(1rem, 2.5vw) 这类写法，会把它当作文本错误直接丢弃整条规则——比如 width: min(300px, 50vw) 这一行完全不执行，元素回退到默认宽度或继承值，布局可能突然塌陷或错位。
这不是兼容性“差”，而是语法层面缺失：这些函数属于 CSS Values and Units Level 4，旧引擎连解析器都没实现。
- IE 全系（包括 IE11）完全不支持
min()/max()，也不支持clamp() - Firefox 79+ 才完整支持
clamp()；iOS Safari 13.4+ 开始支持min()/max() - 部分 Android WebView 对嵌套用法（如
min(calc(100% - 2rem), 400px)）会静默失败
@supports 检测必须带完整调用形式
不能写 @supports (min: 0) 或 @supports (width: min())，这两种都不可靠：
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
-
@supports (min: 0)在 Safari 12.1 会被误判为 true，结果启用后样式空白或崩溃 -
@supports (width: min())语法非法，检测直接失败 - 正确写法是：
@supports (width: min(0px, 0px))—— 三个参数必须带单位（0px，不能是0），否则某些 WebView 会通过检测但运行时报错
降级必须前置静态值，顺序不能错
很多人把兜底写在 @supports 块里，或者把 var(--x, #fff) 当万能解，其实都无效：
-
width: 300px; width: min(300px, 50vw);—— 正确：旧浏览器读第一行，新浏览器覆盖第二行 -
width: min(300px, 50vw); width: 300px;—— 错误：新浏览器被后声明覆盖，旧浏览器根本看不到第二行 -
width: var(--w, min(300px, 50vw));—— 错误：IE 连var()都不认，整个声明丢弃
如果目标环境明确老旧（比如内网系统要兼容 iOS 12），建议跳过函数，直接用媒体查询分段：
width: 300px;<br>@media (min-width: 640px) {<br> width: calc(300px + 2vw);<br>}<br>@media (min-width: 1024px) {<br> width: 50vw;<br>}
Sass 中写 min()/max() 容易踩的坑
Sass 不是编译时计算 min()/max()，它只是原样输出字符串给浏览器运行时处理：
-
width: min($min-width, 50vw);—— Sass 会报错，因为变量不能直接塞进函数 - 正确做法是插值：
width: #{'min(' + $min-width + ', 50vw)'}，但这样失去类型检查 - 想在编译期算出确定值，得用
@use "sass:math"+math.min()，且要求单位一致（20px和1rem不能混用） - 单位不一致时，Sass 无法比较，只能 fallback 到 CSS 运行时函数，此时兼容性风险照旧
最常被忽略的是：函数里混用单位（如 min(1rem, 20px)）在 Safari 12 下可能解析失败，而开发者只看到“字体变小了”，却查不到源头在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
