用 max-width 配合 width: 100% 是控制容器响应式宽度最稳妥的方式，比单纯用 width: 100% 或 width: 100vw 更可靠，尤其在嵌套、缩放、滚动条场景下不容易溢出或错位。
直接说结论：用 max-width 配合 width: 100% 是控制容器响应式宽度最稳妥的方式，比单纯用 width: 100% 或 width: 100vw 更可靠，尤其在嵌套、缩放、滚动条场景下不容易溢出或错位。
为什么不能只写 width: 100%
单独设 width: 100% 会让元素严格撑满父容器，但父容器本身可能没限制最大宽度——比如在大屏上，它会无限变宽，内容被拉得稀疏难读；更麻烦的是，如果父容器有 padding 或 border，而子容器又没设 box-sizing: border-box，实际宽度还会超出预期。
-
width: 100%是相对父容器计算的，父容器若未设max-width，它就随视口无限制扩展 - 移动端横屏、PC端浏览器缩放、iframe嵌入等场景下，
100%容易导致横向滚动条意外出现 - 没有“上限”意味着设计断点失效，响应式意图落空
max-width + width: 100% 的标准写法
这才是现代响应式容器的标配组合。它让容器在小屏时占满可用空间，在大屏时停在预设宽度，同时保持弹性。
- 必须同时声明：
width: 100%（保证小屏下撑满）和max-width: 1200px（设定大屏上限） - 推荐加
margin: 0 auto实现居中，避免靠左贴边 - 如果容器含 padding，务必加
box-sizing: border-box，否则max-width会包含 padding，实际内容区变窄
`.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
box-sizing: border-box;
}
什么时候该换用 max-width: 100%？
极少数情况需要“最大也不超过视口宽度”，比如模态框、全宽 Banner 下的内层内容区。这时用 max-width: 100% 而不是固定像素值，可防止在窄屏（如折叠屏竖向）下内容被裁切。
-
max-width: 100%是相对于其**包含块（containing block）** 的宽度，不是视口，所以仍受父级约束 - 它不解决“大屏过宽”问题，仅防“窄屏溢出”，不能替代
max-width: 1200px这类设计锚点 - 搭配
width: 100%使用时，效果等价于只写width: 100%—— 所以单独用max-width: 100%意义不大，除非父容器本身有明确宽度限制
容易被忽略的兼容性细节
IE11 对 max-width 在 flex / grid 子项中的行为有偏差，且不支持 max-width: min(1200px, 100%) 这类现代语法。如果你还要支持 IE，就得放弃 CSS clamp() 或 min/max 组合，老老实实用媒体查询兜底。
- Flex 容器里的子项，IE11 下
max-width可能被忽略，需额外加flex: 0 0 auto -
max-width: fit-content在 Safari 旧版本中不稳定，别用它替代像素值 - 滚动条宽度会影响
100vw，但不影响width: 100%+max-width，这是后者更稳的关键原因之一
真正难的不是写对这两行 CSS，而是想清楚：这个容器的“最大合理宽度”到底是多少像素，以及它的父级是否真的干净——有没有隐式的 padding、transform 或 writing-mode 改变包含块。这些地方一错，max-width 就会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
