min() 和 max() 可替代约60–70%尺寸边界控制类媒体查询，但不支持结构切换或多属性联动；适用软性上下限场景，需规避单位混用、上下文依赖及兼容性问题。
min() 和 max() 不能完全替代媒体查询，但能替代其中约 60–70% 的「尺寸边界控制类」逻辑——比如限制宽度上限、保障字体下限、约束间距弹性范围。关键在于它们只解决“单属性的动态取值”，不处理“结构切换”或“多属性联动”。
什么时候该用 min() 而不是媒体查询？
当你想给某个 CSS 属性设一个「软性上限」，且这个上限依赖视口或父容器时，min() 更简洁、更可维护。
- 典型场景：容器最大宽度、图片最大尺寸、卡片内边距随屏幕缩放但不超限
- 常见错误：写成
width: min(100%, 800px, 90vw)—— 多个相对单位混用容易导致不可预期结果（比如100%和90vw在不同上下文中计算基准不同） - 推荐写法：优先用
vw+ 固定像素，如width: min(90vw, 1200px)；若需兼容老布局，可搭配max-width回退 - 注意：IE 完全不支持，
min()在 Safari 13.1+、Chrome 79+、Firefox 75+ 才稳定可用
max() 容易被误用的三种情况
max() 看似简单，但浏览器对“哪个值更大”的判断，取决于单位换算时机和上下文，稍不注意就失效。
- 字体大小写成
font-size: max(16px, 2em)：如果父元素font-size是 10px，2em就是 20px，此时生效；但如果父元素是 6px，2em= 12px，max()就会选 16px —— 这种隐式依赖常被忽略 - 用在
height上期望“至少占满视口”：如height: max(100vh, 600px)，在 iOS Safari 中可能因地址栏缩放导致100vh计算不准，建议加min-height回退 - 与
calc()嵌套时漏括号：width: max(100% - 2rem, 400px)是非法语法，必须写成width: max(calc(100% - 2rem), 400px)
min() 和 max() 性能与调试要点
它们本身无运行时开销，但组合不当会放大计算复杂度，尤其在动画或滚动中频繁重排的元素上。
立即学习“前端免费学习笔记（深入）”；
- 避免在
transform或opacity等将触发合成层的属性上滥用min()/max()，因为这些函数仍需样式计算，可能打断 GPU 加速路径 - 调试时别只看 DevTools 显示的最终值：右键检查元素 → “Computed” 面板里找对应属性，点开小箭头才能看到
min(...)的原始参数和当前解析结果 - 单位混合是最大隐患：比如
padding: max(1rem, 5vw, 20px)，浏览器必须在每次布局时重新计算所有单位并比较，而1rem和5vw的基准可能冲突（rem依赖根字号，vw依赖视口）
真正难的不是写出 min(90vw, 1200px)，而是判断这个表达式在所有目标设备、所有缩放级别、所有嵌套上下文中是否始终产生你预期的行为——它不像媒体查询那样显式分段，而是一条连续曲线，稍有偏差，就在某个临界点崩掉。
