max()和min()返回0的根本原因是旧版浏览器（如android 4.4 webview、safari≤15.2、微信x5）不支持该函数语法，整条css声明被静默丢弃，属性回退至初始值（如width:auto→0px、font-size:medium→0px）。
max() 和 min() 返回 0 的根本原因不是计算错误，而是浏览器直接忽略整条声明
当你在 Android 4.4 WebView、Safari ≤15.2 或微信 X5 内核中看到 width 或 font-size 算出来是 0，大概率不是函数算错了，而是 CSS 解析器压根没认出 max() 或 min() 这个语法——整条规则被静默丢弃，属性回退到初始值（比如 width: auto → computed 为 0px；font-size: medium → 在某些上下文中 fallback 成 0px）。
这和 JS 报错不同，它不提示、不警告，只默默失效。
单位混用导致解析中断，尤其在旧 Safari 和 WebView 中
以下写法在 Safari 12–15.1、Android WebView 4.4–6.0 中极易触发“整条规则失效”：
-
font-size: max(1rem, 2.5vw)—— rem 和 vw 混用，部分旧 Safari 会跳过整行 -
padding: min(1em, 16px)—— em 和 px 混合，在 Android 4.4 WebView 中解析失败 -
width: min(100%, 800px)——100%是相对父容器，但旧引擎对百分比参与函数计算支持极差，常返回 0
✅ 安全做法：统一单位，优先用视口单位或像素：width: min(100vw, 800px)、font-size: max(16px, 2.5vw)。注意：Chrome 95+ 支持混合单位，但旧环境不行。
属性不支持函数，却硬塞进去，结果也是 0
min() 和 max() 并非所有属性都支持。例如：
-
min-width: min(320px, 50vw)❌ ——min-width属性本身不接受函数表达式，整条被忽略，computed 值为默认auto（可能显示为0px） -
flex-basis: max(200px, 30%)❌ —— 同样不支持，回退到auto - ✅ 正确位置：只能用于明确支持计算函数的属性，如
width、height、font-size、padding、gap、inline-size
验证方式：打开 DevTools → Computed 面板，看该属性是否显示为有效数值；如果为空白或原始字符串（如 "max(16px, 2.5vw)"），说明未解析成功。
@supports 检测写错，导致降级逻辑完全失效
很多人写：
-
@supports (max: 0) { ... }❌ —— 语法非法，检测永远 false -
@supports (font-size: max()) { ... }❌ —— 缺参数，解析失败 - ✅ 正确写法：
@supports (font-size: max(0px, 0px)) { ... }，且三个参数必须带单位（不能是0）
更关键的是：如果降级样式写在 @supports 块**内部**，旧浏览器因不识别 @supports 语法，整个块被跳过，连兜底样式都看不到。正确顺序必须是：
font-size: 16px; /* 兜底，所有浏览器都生效 */
@supports (font-size: max(0px, 0px)) {
font-size: max(16px, 2.5vw);
}
否则，你看到的“0”，其实是兜底没写、函数又失效、浏览器彻底无从下手的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
