max-width 控制元素自身宽度上限而非父容器，需配合 width: 100% 才生效；min-width 防容器过窄但不解决内容溢出，须协同 word-break、overflow-wrap 等属性。
max-width 用在响应式布局里到底控制谁？
常见错误是只写 典型失效场景：一个 立即学习“前端免费学习笔记（深入）”； 媒体查询中的 更隐蔽的问题是设备像素比（DPR）影响。比如某些 iPad Pro 视口报告为 在 iOS Safari 或 Android WebView 中， 真正麻烦的从来不是记住这两个属性怎么写，而是得同时盯住视口变化、父容器约束、内容自然尺寸、盒模型行为、以及不同浏览器对 flex/grid 的实现差异——稍一松懈，max-width 不是限制容器“最大能多宽”，而是告诉浏览器：“这个元素宽度最多别超过这个值，哪怕父容器更宽也请停住”。它常用于 width: 100% 实现弹性缩放。max-width: 768px 却不设 width，结果元素保持默认宽度（比如块级元素撑满父容器），max-width 完全不生效。
width: 100%; max-width: 768px;
img { width: 100%; max-width: 100%; height: auto; }（注意：这里 max-width: 100% 是相对于父容器，不是像素值）max-width 做断点，例如 @media (max-width: 768px) 中的 768px 是视口宽度上限，和元素上的 max-width 属于不同作用域，别混淆min-width 为什么经常被忽略？它真能防止内容挤崩吗？
min-width 的作用是“再窄也不能窄过这个值”，但它不会自动触发换行或隐藏溢出——是否撑破布局，取决于内容类型和 white-space、overflow 等其他属性是否配合。min-width: 320px 的 min-width 只管容器最小尺寸，不管内部内容怎么流。
word-break: break-word; 或 overflow-wrap: break-word;
min-width + table-layout: fixed;，否则默认自动布局下 min-width 可能被忽略flex 子项单独设 min-width 后又没设 flex-shrink: 0，否则缩小视口时仍可能被压缩到小于设定值max-width 和 min-width 在媒体查询里的断点逻辑差异
(max-width: 768px) 和元素样式里的 max-width: 768px 字面一样，含义完全不同：前者是“视口宽度 ≤ 768px 时启用该规则”，后者是“该元素宽度上限为 768px”。混用会导致断点错位或样式不触发。1024px，但 DPR=2，实际物理像素更高。此时用 @media (max-width: 1024px) 会匹配，但若依赖 max-width 控制图片尺寸，可能因高清屏下渲染模糊。
@media (max-width: 768px) 比 @media (max-width: 48em) 更直观，但 em 更适配用户字号偏好srcset 和 image-set()，不要只靠 max-width 缩放原始大图min-width 做断点，如 @media (min-width: 769px)，容易和上一条 max-width 断点之间留出 1px 空隙（如 768.5px 视口），建议用 min-width 断点时统一加 1px 偏移或改用 min-width/max-width 成对覆盖移动端适配中这两个属性最容易踩的坑
max-width 对 、 等表单控件无效是常见现象——这些元素有原生渲染逻辑，CSS 尺寸控制力弱。而 min-width 设太小（如 min-width: 0）在 Flex/Grid 布局中反而会破坏默认最小内容宽度（min-content），导致文字被强行截断。
width + box-sizing: border-box，max-width 仅作兜底flex: 0 0 auto 比只写 min-width: 200px 更可靠vw 单位时，max-width: 100vw 在 iOS 上可能因地址栏显示/隐藏导致视口宽度跳变，引发布局抖动；稳妥做法是 max-width: 100% 或用 JS 监听 resize 动态更新/* 示例：安全的响应式卡片容器 */
.card {
width: 100%;
max-width: 480px;
min-width: 280px;
margin: 0 auto;
}
.card img {
width: 100%;
max-width: 100%;
height: auto;
}
.card p {
word-break: break-word;
overflow-wrap: break-word;
}max-width 就成摆设，min-width 就变枷锁。
