min() 和 max() 在 CSS 中仅在计算值阶段静态取舍，不自动响应尺寸变化；适用于临界点切换，如宽度区间约束、字号上限或行高下限，需注意上下文、单位一致性和布局模型前提。
min() 和 max() 在 CSS 中的实际约束效果是什么
min() 和 max() 不是“自动适配”的魔法函数，它们只在计算值阶段做一次取舍，结果是静态的——一旦浏览器解析完表达式，就不再响应后续尺寸变化，除非触发重排（比如窗口 resize 后重新计算）。它们真正起作用的场景，是替代过去靠媒体查询或 JS 手动控制的“临界点切换”，比如：让一个卡片宽度在 280px 到 400px 之间弹性伸缩，但绝不小于 280px、也不大于 400px。
- 表达式里混用单位是安全的（如
min(100%, 400px)），浏览器会按上下文转为相同单位再比较 - 不能直接写
min(width, 400px)—— CSS 不支持变量名或属性名作为参数，只能是字面量或已定义的自定义属性（var(--w)） - 多层嵌套可行（如
min(max(300px, 50%), 800px)），但可读性陡降，调试困难
什么时候该用 min()/max() 而不是 clamp()
clamp() 是 min() + max() 的语法糖，等价于 max(最小值, min(首选值, 最大值))。但三者语义不同：
- 用
min()单独出现，适合“上限封顶”场景：比如按钮文字字号不能撑破容器，写成font-size: min(1.2rem, 4vw) - 用
max()单独出现，适合“下限兜底”场景：比如小屏下确保行高不至于过挤，line-height: max(1.4, 24px) - 用
clamp()更适合“区间锁定”，语义清晰且不易写错顺序，例如：width: clamp(280px, 80vw, 400px)
注意：Safari 15.4+ 才完整支持 clamp()，而 min()/max() 从 Safari 15.2 就可用；若需兼容旧 Safari，优先拆成 max(min(...), ...) 组合。
常见错误：为什么 min() 写对了却没生效
最常踩的坑不是语法，而是计算上下文缺失：
立即学习“前端免费学习笔记（深入）”；
- 在
display: inline元素上设width: min(200px, 50%)无效 —— 行内元素不接受宽高，得先加display: inline-block或display: block - 父容器没设
width或是display: flex且未设flex-shrink: 0，子元素的百分比基准可能为0，导致min(50%, 300px)实际取到0px - 使用
em/rem时，父级字体大小动态变化（比如用户缩放），min(1.5rem, 24px)的比较基准会漂移，建议统一用px或vw配合视口单位 - 某些旧版 Chrome（≤98）对
min()里含calc()的嵌套支持不稳定，例如min(calc(100% - 20px), 600px)，可改用clamp()或预计算
配合 CSS 自定义属性实现可配置弹性约束
硬编码 min(320px, 90vw) 不利于维护。更实用的方式是把边界值抽成变量：
:root {
--min-width: 320px;
--max-width: 90vw;
}
<p>.card {
width: min(var(--min-width), var(--max-width));
}这样后续只需改 :root 里的值，所有用到的地方自动更新。但要注意：
- 自定义属性必须有默认值，否则
var(--missing)会导致整条声明失效 - 如果想让某组件响应式地切换约束（比如移动端用
320px，桌面端用480px），得配合媒体查询重设变量，而不是在min()里写条件逻辑 - 变量值仍要符合单位一致性，
var(--a)是300px，var(--b)是80%，组合进min()没问题；但如果一个是1.2rem、另一个是20px，浏览器会尝试转换，但结果依赖根字体大小，容易误判
实际项目中，最易被忽略的是：这些函数只解决“单次计算”，不替代布局模型本身。如果容器本身被 flex 或 grid 压缩到无法伸展，min() 再大也出不来。先理清 display 行为，再加尺寸约束，顺序不能反。
