CSS min()函数不能写在HTML标签里，必须写在CSS规则中；它是一次性取最小计算值，需含vw/rem/%等动态单位才有效，否则为静态值。
直接说结论：CSS min() 函数不能写在 HTML 标签里，必须写在 CSS 规则中；它不是“自动响应”的魔法，而是一次性取最小计算值，真正起效的前提是参数里至少有一个动态单位（比如 vw、rem 或百分比），否则就是静态固定值。
为什么 min(50%, 300px) 有时没效果？
最常见原因是上下文缺失，导致百分比基准为 0 或被忽略：
-
display: inline元素上设width: min(50%, 300px)—— 行内元素不接受宽高，必须先加display: inline-block或display: block - 父容器没设
width，或用了display: flex但子项没设flex-shrink: 0，此时50%的计算基准可能为 0，min()就会取到 0px - 写了
width: min(100%, 800px)却想按视口限制 ——100%是相对于父容器，不是视口；应改用100vw - 在
min-width属性里嵌套min()，如min-width: min(320px, 50vw)—— 浏览器会直接忽略整条声明，正确写法是min-width: max(320px, 50vw)（注意这里是max）
min() 和 clamp() 到底该选谁？
语义和适用场景不同，别硬套：
- 只设上限（比如“字体最大不能超 4rem”）→ 用
font-size: min(4rem, 8vw)，简洁明确 - 只设下限（比如“行高至少 24px”）→ 用
line-height: max(24px, 1.4)，min()在这里完全不合适 - 要同时卡住上下限（比如“宽度在 280px–400px 之间，首选 80vw”）→ 优先用
width: clamp(280px, 80vw, 400px)，语义清晰、顺序不易错 - 需要三值以上或嵌套逻辑（比如
min(100%, max(320px, 50vw))）→ 只能用min()/max()组合，clamp()不支持
怎么写才能兼容老浏览器又不冗余？
现代项目可忽略 IE，但 Chrome ≤98 或旧 Safari 仍可能出问题：
立即学习“前端免费学习笔记（深入）”；
- 回退写法必须是“先旧后新”：
width: 800px;width: min(100vw, 800px);浏览器忽略不认识的函数时，会沿用上一行 - 含
calc()的嵌套（如min(calc(100% - 20px), 600px)）在旧 Chrome 中不稳定 → 改用clamp()，或把calc()提前算好 - Safari 15.2+ 支持
min()/max()，但clamp()要 15.4+ → 若需兼容 15.2–15.3，就拆成max(min(), )组合 - 单位混用（
min(200px, 50%)）本身安全，但结果依赖上下文，调试时建议统一用vw或px配合视口逻辑
真正容易被忽略的是：这些函数只在计算值阶段跑一次，窗口 resize 后会重新计算，但不会监听字体缩放、系统 DPI 变化或父级尺寸动画。如果你发现 min(1.5rem, 24px) 在用户放大文字后突然变小，问题不在函数本身，而在 rem 基准漂移了——这时候换 vw 或加 @media (prefers-reduced-motion) 干预更实际。
