先给出核心结论：min() 和 max() 这两个CSS函数并非传统意义上的“设置上限或下限”，而是“从多个候选值中挑选出最小或最大的那个”。真正实现限制效果的关键，在于你如何巧妙搭配参数——例如将相对单位（视口宽度、百分比）与绝对单位（像素）组合使用。
min() 和 max() 的基础用法：不是限制，而是选择
很多人刚接触时容易产生误解，认为 min() 是设最小值，max() 是设最大值。实际上，它们是CSS内置的计算函数，工作方式是从你提供的参数中选出最小或最大的那个值。真正的限制效果，来源于你传入的参数组合——比如将动态的视口单位与一个固定的像素值搭配使用。
一个经典的错误写法是 width: min(300px, 100%)。大多数情况下，这等价于 width: 300px，因为300px几乎总是小于100%的宽度，结果反而是元素不再响应式变化。
- 正确的思路恰好相反：用
min()来施加一个上限，用max()来兜底一个下限。 - 一个典型的组合是
min(100%, 800px)，表示“宽度最多撑满父容器，但达到800px后不能再继续扩展”。 - 另一个常见用法
max(200px, 50vw)则表示“宽度至少200px，但当屏幕宽度的一半大于200px时，就取50vw”。 - 特别要注意单位兼容性：不能把无单位数字和带单位的数值混在一起，比如
min(100, 500px)会导致整个声明无效。
移动端图片宽度限制：用 min() 防止超宽，用 max() 防止过小
响应式设计中的图片处理常遇到两个痛点：小屏手机下图片被父容器撑变形，或者大屏显示器上图片占满整行显得单薄。用 min() 和 max() 组合拳可以一步到位解决。
举个例子：
img {
width: min(100%, 600px);
max-width: 100%;
height: auto;
}
这里的 min(100%, 600px) 确保了图片宽度不会超过600px；而 max-width: 100% 则是一个兜底策略，防止父容器缩小时图片溢出。两者缺一不可，才能真正做到收放自如。
- 千万不要遗漏
max-width: 100%：在没有明确宽度的 flex 或 grid 容器里，光靠min()可能会失效。 - 虽然
width: min(600px, 100%)和前面的写法效果一样，但为了语义清晰，建议把动态值（如100%）放在前面，别人读代码时能一眼看出你的意图。 - 如果图片还需要居中，别忘了加上
display: block; margin: 0 auto，否则内联元素的width会不听话。
字体大小响应式调节：clamp() 更稳定，但 min/max 仍有不可替代的应用场景
clamp() 函数用起来确实很直观（比如 clamp(1rem, 2.5vw, 1.5rem)），但它的本质其实就是 max(min(), upper) 的语法糖。当遇到更复杂的非线性控制逻辑，或者需要叠加媒体查询时，min() 和 max() 反而展现出更灵活的潜力。
比如这个需求：标题在小屏时保持 1.2rem，中屏用 3vw 动态变化，但到了大屏无论如何不能小于 1.5rem。就可以这样写：
h2 {
font-size: max(1.2rem, min(3vw, 1.5rem));
}
- 这种嵌套写法是有效的，浏览器解析顺序是先从内到外计算
min()，再算max()。 - 兼容性方面，Chrome 95+、Firefox 88+、Safari 15.4+ 都已经稳定支持。旧版 Safari 需要
-webkit-min()前缀，不过现在基本可以忽略这个问题了。 - 不要试图用
min()或max()去控制行高或外边距，这些属性的计算行为很敏感，容易因为继承关系产生预期外的效果。
容易被忽略的计算上下文：flex 和 grid 中的 min/max 行为差异
最头疼的地方往往不是函数本身的语法，而是它所在的上下文。在 flex 容器里，min-width 和 width: min() 的表现可能截然不同；在 grid 里，把 min() 用在 grid-template-columns 中能触发自动重排，但如果用在子项的 width 上，可能被忽略。
- 在 flex 项目里，浏览器会更优先遵循
min-width属性。所以，推荐写成min-width: min(300px, 80%)，而不是直接赋值给width。 - 在 grid 的列定义中，可以这样编写：
grid-template-columns: repeat(auto-fit, minmax(min(250px, 1fr), 1fr))。但切记，minmax()的第一个参数不能直接传入min()函数（会报错），必须换个写法，比如先用minmax(250px, 1fr)，然后在外层容器上做约束。 - 所有计算函数都依赖父容器的尺寸。如果父容器宽度是
auto（比如一个没有设置宽度的div），那么100%这个值就没法计算，此时必须搭配max-width或给父容器一个明确的宽度。
说实话，在实战中用这些函数最折磨人的不是记语法，而是得随时想清楚：这个 min() 到底在跟谁比较？是跟视口宽度比，跟父容器比，还是跟另一个计算出来的值比？一不留神，就可能写了个“看上去很美，其实根本没起作用”的代码。务必多测试。
