最有效的是将 max-width 设置在页面最外层容器（如 .container），配合 margin: 0 auto 和 width: 100% 实现响应式居中；width: 100% 保证小屏收缩，max-width 仅在宽屏时约束上限。
max-width 设置在哪一层最有效
直接作用于页面最外层容器（比如 或包裹全部内容的
），而不是给
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 是“上限”，不是“必须达到”，它允许元素在窄屏中自然变窄。
立即学习“前端免费学习笔记（深入）”；
- 手机横屏（~768px）：容器宽度 = 768px
- 平板竖屏（~414px）：容器宽度 = 414px
- 桌面（≥1200px）：容器宽度 = 1200px（不再变宽）
配合媒体查询时 max-width 放哪边
常见误区：在媒体查询里重复设 max-width，比如：
