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
min-width 防点击区太小，而文章段落必须控 max-width 防阅读吃力。 
