Safari 15.6 前 min()/max() 不支持嵌套，如 min(100%, max(300px, 50vw)) 会被整条丢弃；clamp() 中不可含 calc() 或 var()，否则旧版 Safari/Firefox 拒绝解析；@supports 无法检测嵌套能力，需按版本分策略降级。
为什么 min() 和 max() 嵌套在 Safari 15.6 之前会失效
旧版 Safari（≤15.5）对 min() 和 max() 的解析器不支持嵌套调用，比如 min(100%, max(300px, 50vw)) 会被整条丢弃，退回到未声明状态（如字体回退到 16px）。这不是语法错误，而是引擎直接跳过整个函数体。Chrome 和 Firefox 从 90+ 版本起已稳定支持嵌套，但 Safari 直到 15.6 才修复该问题。
验证方式：打开 Safari 15.4 开发者工具 → Elements 面板 → 查看计算样式中对应属性是否为空或显示为 inherit；若为空，大概率是嵌套被静默忽略。
- 不要写
width: min(100%, max(400px, 6vw)) - 改用单层
width: min(100%, 6vw)+min-width: 400px组合 - 或降级为媒体查询：
width: 6vw;+@media (max-width: 666px) { width: 400px; }（666px = 400px ÷ 6vw × 100）
clamp() 里不能嵌套 calc() 或 var() 的真实原因
clamp() 的三个参数必须是可静态比较的值，浏览器需在布局前完成区间判定。一旦其中任一参数含 calc() 或 CSS 变量（var(--x)），Safari 16.4 以下、Firefox 115 以下会拒绝解析整条声明——不是取不到值，而是根本无法建立 MIN/VAL/MAX 的数值关系。
典型错误写法：font-size: clamp(var(--s-min), calc(1rem + 0.25vw), var(--s-max))。即使变量已定义，Safari 16.3 仍会跳过该行。
立即学习“前端免费学习笔记（深入）”；
- 兜底值必须是纯单位值：
1.125rem、16px，不可含calc()、var()、em - 首选值可用
4vw或2.5vh，但避免混用calc(1rem + 0.5vw) - 若必须动态计算，改用 JS 注入内联样式：
element.style.fontSize = `clamp(${min}px, ${pref}vw, ${max}px)`
@supports 检测 min/max/clamp 嵌套能力不可靠
@supports (width: min(0px, 0px)) 只能确认基础函数存在，无法反映嵌套是否可用。Safari 15.4 会通过该检测，但执行 min(100%, max(300px, 5vw)) 时依然崩溃。真正需要的是运行时行为检测，而 CSS 没有提供。
更务实的做法是按浏览器版本切分策略：
- 对 Safari ≤15.5 / Firefox ≤115：禁用所有嵌套，只用单层
min()/max()或clamp() - 对 Chrome ≥98 / Edge ≥98：允许
clamp()内嵌calc()（如clamp(1rem, calc(1rem + 0.3vw), 1.5rem)） - 对 iOS WebView（如微信 X5 内核）：一律视为不支持嵌套，fallback 到媒体查询
clamp() 和 min()/max() 混用时的层叠陷阱
很多人试图用 min(max()) 模拟 clamp()，例如 font-size: min(2rem, max(1rem, 4vw))。这在理论上等价，但实际中 Safari 15.6+ 与 Chrome 120+ 对运算优先级处理不一致：前者先算 max() 再比 min()，后者可能并行解析，导致临界点偏移 1–2px。
更关键的是，这种写法会让 @supports 检测失效——@supports (font-size: min(0px, 0px)) 通过，但 min(2rem, max(1rem, 4vw)) 在旧环境仍被丢弃，而开发者误以为已兜底。
- 坚持用
clamp()作为主方案，仅当明确需兼容 Safari ≤15.5 时才换min()/max()单层组合 - 永远把静态兜底写在
@supports块之前：font-size: 1.25rem;→@supports (...) { font-size: clamp(...); } - 避免在同一个选择器里混用
clamp()和min()/max()，CSS 层叠规则下后者可能意外覆盖前者
