min()和max()可分别控制容器宽高上下限，min(90vw,500px)防大屏拉伸，max(320px,85%)保小屏可读，组合使用可模拟clamp()提升兼容性。
min() 控制容器最大宽度，避免大屏溢出
移动端容器在平板或折叠屏上容易因视口变宽而拉伸过度，文字行过长、图片变形。用 min() 直接设上限最有效：比如 width: min(100%, 480px) 表示“取 100% 宽度和 480px 中较小者”——小屏下是 100%，大屏下锁死在 480px。
- 单位混用要小心：
min(90vw, 500px)比min(90%, 500px)更可靠，因为%依赖父容器，而vw始终基于视口 - 别用
max-width替代：max-width是层叠规则，不参与计算上下文；min()是实时计算值，能和calc()或clamp()嵌套 - 常见错误是写成
min(480px, 100%)——顺序不影响结果，但可读性差；建议把动态值（如100%或90vw）放前面，固定值放后面
max() 保障最小可用空间，防小屏压缩失效
纯 % 或 vw 在超小屏（比如 iPhone SE 或 zoomed-in 模式）下可能缩到不可读。用 max() 设底线：width: max(320px, 85%) 表示“至少 320px，但不超过父容器 85%”。
- 注意单位一致性：不能写
max(320px, 1.2rem)，虽然现代浏览器大多支持，但 Safari 15.4 之前会静默失败 - 和
min-width的区别在于：后者是布局后强制约束，max()参与初始尺寸计算，对grid-template-columns或flex-basis更友好 - 典型误用是
max(100%, 320px)——这在所有设备上都等于100%，因为100%总是 ≥320px（除非父容器极窄），应改用max(320px, 85%)或max(320px, 20vw)
min() + max() 组合模拟 clamp() 实现双边界控制
有些旧版 Android WebView（如 UC 内核）不支持 clamp()，但支持 min() 和 max()。可以用 max(MIN, min(PREFERRED, MAX)) 手动实现等效逻辑：
.card {
width: max(300px, min(90vw, 480px));
}
- 这个写法等价于
clamp(300px, 90vw, 480px)，但兼容性更好（Chrome 77+/Firefox 75+/Safari 13.1+） - 优先把
min()包在内层：先控上限，再保下限，逻辑更清晰；反过来写min(max(...), ...)容易绕晕且无实际优势 - 别嵌套太深：三层以上（如
max(a, min(b, max(c, d)))）会让调试困难，也增加 CSS 引擎计算负担
结合 Grid 的 auto-fit 与 minmax() 避免列塌陷
移动端卡片列表常因列数固定导致小屏横向滚动。minmax() 配合 auto-fit 是解法，但需用 min() 防止最小列宽失控：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)));
gap: 12px;
}
-
min(280px, 100%)确保单列时不会超出屏幕：小屏下取100%，大屏下取280px - 单独写
minmax(280px, 1fr)在 iPhone SE 上会强制单列宽 280px，超出视口，必须加min()保护 -
auto-fit比auto-fill更适合移动端：它会收缩空轨道，让现有列撑满容器，视觉更紧凑
1rem 变成 24px，此时 max(16px, 1.2rem) 就可能失效。真要保底，优先用 px 或 em 这类绝对/相对基准明确的单位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
