min-width 和 max-width 互斥生效，根据当前宽度动态选择约束；flex/grid 子项需显式设 min-width: 0 防止默认 min-width: auto 阻止收缩；box-sizing: border-box 下 min-width 约束总宽。
min-width 和 max-width 的边界逻辑不是“叠加”，而是“互斥生效”
它们不同时起作用，而是根据当前计算出的宽度动态选择约束条件。比如：width: 100%、min-width: 320px、max-width: 1200px——当父容器宽为 200px 时，实际渲染取 320px；父容器宽为 1500px 时，取 1200px；父容器宽为 800px 时，则按 100% 占满，即 800px。
容易踩的坑：
- 只写
min-width不设width或flex-basis，元素可能仍保持内容宽度（如文字撑开），min-width不触发 - 在
display: flex容器里给子项设min-width，但没关掉默认的min-width: auto，结果子项死活不收缩 -
box-sizing: border-box下，min-width约束的是总宽（content + padding + border），不是 content 区域，算错会导致内容被裁切
响应式容器最稳妥的写法：width + min-width + max-width + margin
这不是炫技，而是覆盖绝大多数设备尺寸波动的最小完备组合。典型结构如下：
section.content {
width: 100%;
min-width: 320px;
max-width: 1200px;
margin: 0 auto;
}
为什么这四条缺一不可：
-
width: 100%是弹性基础，让容器随父级缩放 -
min-width: 320px拦住极端小屏（比如折叠屏半开、调试窗口拖太小） -
max-width: 1200px防止大屏下文本行过长，影响可读性 -
margin: 0 auto确保居中，否则max-width只限制右边界，左边缘贴边会难看
注意：max-width 值建议比媒体查询断点略小（例如断点用 @media (min-width: 1200px)，则容器 max-width 设为 1170px），避免重绘抖动。
Flex/Grid 子项里的 min-width 默认是“防收缩陷阱”
这是实际项目中最常被忽略的一点：flex 和 grid 子项默认有 min-width: auto，它会让子项拒绝收缩到内容最小宽度以下——哪怕你写了 flex: 1 或 minmax(0, 1fr)，它也可能卡住不动。
解决方法很简单，但必须显式声明：
- 对 flex 子项加
min-width: 0（推荐）或flex-shrink: 1 - 对 grid 子项，在
grid-template-columns里用minmax(0, 1fr)替代1fr - 如果子项内含图片或文本块，记得同步加
max-width: 100%和overflow-wrap: break-word，否则min-width: 0可能导致文字溢出
媒体查询里混用 min-width/max-width 断点，别只盯像素值
写 @media (min-width: 768px) 和写 @media (max-width: 767px) 表面看是互补，实际容易漏掉非整数宽度（比如 767.5px）。更稳的做法是用区间：
@media (min-width: 320px) and (max-width: 767px) { /* 手机 */ }
@media (min-width: 768px) and (max-width: 1023px) { /* 平板 */ }
@media (min-width: 1024px) { /* 桌面 */ }
但要注意：媒体查询里的 min-width 是视口宽度，和元素上的 min-width 完全无关。有人把两者写反，比如在手机样式里给容器写 max-width: 320px，结果大屏下也受限——这种错误调试起来特别隐蔽。
真正麻烦的从来不是属性本身，而是 min-width: auto 在 flex/grid 中的隐式行为，以及 box-sizing: border-box 下对 padding/border 的包含逻辑。这两个点不手动干预，再多的媒体查询也救不了布局崩溃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
