max-width 是宽度上限（天花板），min-width 是宽度下限（地板）；二者共同为 auto 宽度划定安全区间，可共存实现弹性约束。

max-width 和 min-width 的本质区别

max-width 是“天花板”，min-width 是“地板”——前者限制元素**不能更宽**，后者保证元素**不能更窄**。它们都不强制固定宽度，而是为 width: auto（或弹性布局中的自然尺寸）划定安全区间。

• max-width: 600px：内容少时按需收缩，内容多时最多撑到 600px，超出部分会换行或溢出（取决于 overflow）
• min-width: 320px：哪怕父容器只剩 100px，该元素也至少占满 320px，可能触发横向滚动条
• 两者可共存：width: 100%; min-width: 280px; max-width: 480px;，这是卡片类组件最稳的写法

响应式断点中怎么选 min-width 还是 max-width

断点逻辑直接决定你用哪个：不是“哪个更好”，而是“哪个符合你的适配策略”。

• 移动优先（主流推荐）→ 用 @media (min-width: 768px)：先写手机样式，再逐步加平板、桌面增强规则
• 桌面优先（老项目/后台系统）→ 用 @media (max-width: 767px)：先写大屏，再给小屏做降级（比如隐藏侧边栏、缩小字体）
• 中间尺寸特例（如仅针对 iPad）→ 同时用两个：@media (min-width: 768px) and (max-width: 1023px)

图片、文字、容器三类常见场景实操

光懂概念不够，关键看怎么套进真实元素里。

• 图片自适应：img { max-width: 100%; height: auto; } —— 防止撑破容器，但注意：它不设 min-width，所以极小图可能糊掉（需配合 min-width: 1px 或 srcset）
• 正文区域可读性：.content { max-width: 72ch; margin: 0 auto; } —— 用 ch 单位比像素更语义化（约 72 个字符宽度），避免长行阅读疲劳
• 主容器居中约束：.container { width: 100%; max-width: 1200px; margin: 0 auto; } —— 大屏不拉伸，小屏不缩过头；别漏掉 width: 100%，否则 max-width 在 flex 或 grid 容器里可能失效

容易被忽略的坑和兼容性细节

这些点不报错，但会让布局在某些设备上突然“不对劲”。

• min-width 对 display: inline 元素无效 —— 必须是 block、inline-block、flex 或 grid 等可设宽的 display 类型
• 在 table 布局中，max-width 可能被忽略 —— 表格单元格优先按内容撑开，建议改用 table-layout: fixed + width
• IE11 支持 min/max-width，但对 vmax、vw 单位支持不稳定 —— 若用 min-width: 50vw，在旧浏览器里可能回退成 0
• Flex 项目默认会压缩（flex-shrink: 1），此时 min-width 能防塌陷，但 max-width 不起作用 —— 需显式加 flex-shrink: 0