应为最外层容器设max-width而非width，并配margin:0 auto居中；若仍溢出，需约束子元素：图片加max-width:100%，代码块加overflow-x:auto和white-space:pre-wrap，长英文/URL加word-break:break-word。
主体容器宽度超出视口怎么办
直接给页面最外层容器（比如 或
）加
max-width，而不是 width。用 max-width 才能在小屏上自动收缩，大屏上又不无限撑开。
-
max-width: 1200px是常见安全值，适配多数桌面屏 - 必须配合
margin: 0 auto居中，否则会左对齐溢出右侧 - 别忘了移除父元素可能存在的
width: 100%或flex: 1，它们会覆盖max-width
为什么用了 max-width 还是撑出屏幕
大概率是内部子元素没约束好，比如图片、表格、预格式化文本（
- 图片统一加
max-width: 100%; height: auto; - 代码块或日志类文本加
overflow-x: auto;和white-space: pre-wrap; - 长英文/URL 加
word-break: break-word;或overflow-wrap: break-word; - 检查是否有
display: flex容器里子项写了flex-shrink: 0，它会让子项拒绝压缩
响应式场景下 max-width 怎么配合媒体查询
单纯一个 max-width 不够灵活，需按断点分层控制。重点不是“多设几个断点”，而是守住关键尺寸节点。
body { margin: 0; } .container { max-width: 100%; margin: 0 auto; } @media (min-width: 768px) { .container { max-width: 750px; } } @media (min-width: 992px) { .container { max-width: 970px; } } @media (min-width: 1200px) { .container { max-width: 1170px; } }
- 移动端优先：基础样式设
max-width: 100%，再向上增强 - 断点数值参考常见设备宽度，但不必严格对齐，768/992/1200 是行业惯用值
- 避免在媒体查询里写
width，仍用max-width保持弹性
使用 rem 或 em 设置 max-width 有什么风险
可以，但要小心根字体大小（font-size on html）是否被重置或动态修改。一旦根字号变化，所有基于 rem 的 max-width 都会同比缩放，容易意外变窄或过宽。
立即学习“前端免费学习笔记（深入）”；
- 静态项目用
rem没问题，比如max-width: 62.5rem（对应 1000px，假设根字号为 16px） - 如果用了动态根字号（如根据屏幕宽度 js 修改
document.documentElement.style.fontSize），max-width就会跟着浮动，失去“固定最大宽度”的本意 - 更稳妥的做法：用
px写死关键断点，或用clamp()替代，例如max-width: clamp(320px, 85vw, 1200px)
实际项目中最容易忽略的是子元素的溢出行为——max-width 只管容器自身，不管里面塞了什么。得一层层往下查，直到找到那个不肯折行、不肯缩放、也不肯滚动的元素。