max-width应加在主内容包裹层（如main、.container、#app），而非html或body；需配合flex-shrink:0、min-width:0或minmax()等解决Flex/Grid中失效问题，并优先选用1440px或80ch等合理数值。
max-width 该加在哪个容器上才真正生效
加在 body 或 html 上基本没用——它们不是内容承载主体，还可能破坏全局排版逻辑。真正起作用的是语义明确的主内容包裹层，比如 main、.container、#app（尤其 Vue/React 单页应用）。如果项目用了 Bootstrap，直接覆盖它的 .container 类比新建一层 wrapper 更稳妥。
常见错误是给一个 display: flex 的父容器设了 max-width: 1440px，但子项写了 flex: 1 或含长 URL/单词，结果整行被撑开，max-width 形同虚设。这时必须给子项加 min-width: 0 或 overflow-wrap: break-word，强制它参与收缩计算。
1200px、1440px 还是 80ch？怎么选数值
固定像素值（如 1440px）适合设计稿明确、需强控视觉节奏的场景；80ch（即 80 个字符宽度）更符合可读性原则——人眼单行追踪超过 80–100 字符效率明显下降，且能随字体大小缩放，对高 DPI 屏更友好。
-
max-width: 1200px：适合文字密集型页面，小屏笔记本（1366×768）也能留白适中 -
max-width: 1440px：平衡 2K 屏与阅读舒适度，推荐作为基础值 -
max-width: 80ch：适合内容以正文为主、字体可变的 CMS 或文档站 - 避免
max-width: 100%——它只在父容器窄于自身时生效，超大屏下完全无效
Flex/Grid 容器里 max-width 失效的典型原因
根本问题不在 max-width 本身，而在 Flex/Grid 的默认行为会绕过这个限制：
立即学习“前端免费学习笔记（深入）”；
- Flex 子项设了
flex: 1或flex-grow: 1，会无视max-width强行拉伸 - Grid 中用
1fr定义列宽，等价于“剩余空间均分”，max-width对子项无效 - 子项内含未约束的图片、
iframe、表格等替换元素，它们默认不收缩
解法不是硬加 !important，而是调整布局逻辑：
Flex 子项加 flex-shrink: 1 和 min-width: 0；Grid 列改用 minmax(0, 1440px) 直接约束轨道宽度；所有图片/视频补上 max-width: 100%; height: auto;。
要不要为超大屏（≥2560px）单独写媒体查询
90% 的场景不需要。基础 max-width: 1440px 已覆盖从 1920px 到 4K 的大部分情况。真要微调，也别动 max-width 值，而是用媒体查询控制其他维度：
- @media (min-width: 2560px) { padding-left: 4rem; padding-right: 4rem; } —— 加大边距防贴边
- @media (min-width: 3200px) { font-size: clamp(1rem, 1.2vw, 1.25rem); } —— 适度放大字号提升可读性
- 慎用
max-width: 80vw：4K 屏下 80vw ≈ 3072px，依然过宽；缩放页面时值跳变，布局抖动
真正容易被忽略的是：系统缩放（125%、150%）会让 window.innerWidth 变小，但 max-width 是静态值，不受影响——所以测试不能只拉浏览器窗口，得连真机+缩放一起看。
