CSS max() 是 CSS 函数，非 HTML 功能，必须用于支持长度值的 CSS 属性中（如 width），且需浏览器支持 CSS Values and Units Level 4；写在 HTML 标签或属性里无效。
直接说结论：CSS max() 不是 HTML 功能，不能写在 HTML 标签里；它必须用在 CSS 规则中，且浏览器需支持 CSS Values and Units Level 4（Chrome 79+、Firefox 75+、Safari 15.2+）。
为什么 max() 写在 HTML 里无效
常见错误是把 max() 当成 HTML 属性乱塞，比如：<div max="50vw, 300px"> 或 <div style="width: max(50vw, 300px)">（未加引号或语法错）。这些全部被忽略——因为 HTML 解析器根本不认识 max()，它只认 min/max 这类表单属性（如 <input type="number" min="0" max="100">），和布局无关。
真正起作用的只有 CSS 中的声明：
.card {
width: max(300px, 50vw);
}注意两点：
立即学习“前端免费学习笔记（深入）”；
-
max()必须出现在合法的 CSS 属性值位置，且该属性本身支持长度类值（如width、font-size、padding） - 内联样式里用
style="width: max(300px, 50vw);"是可行的，但必须确保引号闭合、无拼写错误，且浏览器支持
max() 的单位混搭到底安不安全
安全，但结果取决于上下文计算。浏览器会把所有参数转为相同物理单位（如 px）再比大小，所以 max(1.5rem, 24px, 5vw) 没问题——前提是这些单位在当前环境下可计算。
容易出问题的场景：
- 父元素
font-size为0或未定义时，1.5rem算出来是0px，max()就可能取到意外小值 -
50%的基准是父容器宽度，如果父容器width为auto且是display: inline，那50%可能算作0，导致max(50%, 300px)实际取300px（你以为它会弹性，其实卡死了） -
vw包含滚动条宽度（如 100vw 在有竖向滚动条时 > 视口可视宽），小屏下可能造成横向溢出；更稳的写法是100dvw（若支持），否则加overflow-x: hidden补救
和 min-width 一起用会打架吗
会，而且优先级容易误判。比如：
.box {
width: max(300px, 50vw);
min-width: 400px;
}这时 min-width 会覆盖 max() 的结果——因为 min-width 是独立的层叠属性，浏览器先算 width，再用 min-width 强制兜底。最终效果等价于 width: max(400px, 300px, 50vw)，但语义混乱、难维护。
正确做法是只用一种机制：
- 纯下限控制 → 用
width: max(300px, 50vw)即可，别加min-width - 需要更复杂约束（如“不低于 300px，也不超过 800px”）→ 直接上
width: clamp(300px, 50vw, 800px)，语义清晰、无冲突 - 真要回退兼容旧浏览器，写成
width: 300px; width: max(300px, 50vw);，靠层叠覆盖
嵌套 calc() 和多参数的真实表现
max() 支持 calc() 作为子表达式，但老版本 Chrome（≤98）对 max(calc(100% - 20px), 600px) 解析不稳定，可能直接跳过整条规则。
实操建议：
- 优先用
clamp()替代两层嵌套，例如max(calc(12px + 0.5vw), 16px)可改写为clamp(16px, 12px + 0.5vw, 999px)（上限设大点即可） - 三个以上参数时（如
max(10vw, 2em, 16px, 30vh)），注意vh在移动端键盘弹出时会变（视口高度收缩），可能导致字体突然缩小，慎用于关键文字 - 调试时打开 DevTools，在 Computed 面板看最终解析出的像素值，别只信预览——因为
max()是静态计算，resize 后才重算，初始值可能和你预期不一致
最常被忽略的一点：这些函数不是“实时监听”，它们只在样式计算那一刻取值。如果你依赖父容器尺寸变化（比如 flex 容器收缩），而没触发重排，max() 不会自动更新——这时候得靠 resize observer 或重新设置 class 触发重计算。
