最有效的是将 max-width 设置在页面最外层容器（如 .container），配合 margin: 0 auto 和 width: 100% 实现响应式居中；width: 100% 保证小屏收缩，max-width 仅在宽屏时约束上限。
max-width 设置在哪一层最有效
直接作用于页面最外层容器（比如 推荐写法： 注意： 立即学习“前端免费学习笔记（深入）”； 常见误区：在媒体查询里重复设 这反而让小屏继承不到基础值，容易出错。正确做法是： 当父容器是 解决方法： 真正容易被忽略的是：max-width 不是“自动居中”属性，也不对抗 flex 主轴拉伸逻辑；它只在元素处于常规文档流、且宽度由内容或父容器决定时才自然生效。 或包裹全部内容的 或 设 max-width 后再加 margin: 0 auto —— 因为 默认是块级且宽度占满视口，设了 max-width 但没配 margin，它不会居中，视觉上就“没生效”。
.container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
width: 100% 是关键——它让容器在小屏下能收缩，max-width 只在宽屏时起约束作用。
为什么不能只用 width: 1200px
width: 1200px 是固定宽度，小屏设备（如手机）会触发横向滚动条，破坏响应式体验。而 max-width 是“上限”，不是“必须达到”，它允许元素在窄屏中自然变窄。
配合媒体查询时 max-width 放哪边
max-width，比如：@media (min-width: 768px) {
.container { max-width: 960px; }
}
@media (min-width: 1200px) {
.container { max-width: 1200px; }
}
.container { max-width: 100%; }
min-width 逐步放宽限制，例如：@media (min-width: 768px) { .container { max-width: 960px; } }
遇到 flex / grid 布局时 max-width 失效怎么办
display: flex 或 display: grid，子项默认不响应 max-width，尤其设置了 flex: 1 或 grid-template-columns: 1fr 时。
max-width: 100%（配合 width: 0 或 min-width: 0 防止 flex 膨胀）flex-basis 控制基准宽度，例如：flex: 0 1 1200px（不放大、可缩小、基准宽 1200px）max-inline-size: 1200px（更语义化）或显式设置 width + max-width
