max-width 应设为 65ch 并搭配 min(65ch, 90vw)，以适配字体大小、缩放及小屏；需避开 flex/grid 父容器干扰、浮动失效、单位陷阱与框架容器冲突，兼顾可读性与响应式稳定性。
max-width 设置多少合适？
别死守 1200px 或 1440px —— 这不是标准，只是历史惯性。实际该看内容密度和阅读体验：中文段落超过 80 字/行就容易串行，英文更敏感，65–75 字符为佳。max-width 的值要服务于这个视觉节奏，而不是屏幕尺寸本身。
- 正文为主页面，
max-width: 65ch（字符单位）比max-width: 800px更可靠，自动适配字体大小和缩放 - 需要兼顾老设备时，用
max-width: min(65ch, 90vw)，防止小屏上留白过少 - 避免写成
max-width: 1200px+margin: 0 auto就完事——没设box-sizing: border-box时，padding 会撑破限制
为什么 margin: 0 auto 不总居中？
常见错觉是“加了 max-width 就能居中”，其实关键在块级行为是否被破坏。最常踩的坑是父容器用了 display: flex 或 display: grid，子元素的 margin: 0 auto 会失效。
- 确认父容器没意外触发 Flex/Grid 上下文；如果用了，改用
justify-content: center（Flex）或justify-items: center（Grid） -
width和max-width同时存在时，width优先级更高，可能让max-width形同虚设 - 浮动元素（
float: left）会让margin: 0 auto完全无效，必须清除浮动或改用现代布局
响应式断点里要不要重设 max-width？
要，但不是每个断点都加。多数情况只需在小屏（max-width: 480px）时把 max-width 放宽到 100% 或去掉，否则窄屏上反而出现横向滚动条。
- 移动端优先开发时，先设基础
max-width: 65ch，再用@media (max-width: 480px)覆盖为max-width: 100% - 别在中屏（如 768px）又设一个
max-width: 800px—— 这和基础值冲突，且用户缩放时容易跳变 - 用
rem或ch单位比px更稳；vw在 iOS Safari 某些版本有缩放 bug，慎用
和 container 类（如 Bootstrap）混用会怎样？
直接冲突。像 .container 内部通常已含 max-width + margin: 0 auto，你再套一层自己的 max-width，结果就是双重限制、内边距错乱、甚至水平溢出。
- 检查是否重复引入框架的容器类；如果必须用，就删掉自己写的
max-width，只定制padding或字体相关样式 - 自定义容器类命名别叫
container，避免 CSS 优先级误覆盖；用page-main或content-wrap更安全 - 框架的
container-fluid是width: 100%，它和你的max-width不冲突，但也没意义——除非你后续用媒体查询重新加限制
真正难的是平衡“内容可读性”和“设计延展性”。很多人调完 max-width 就以为完成，却忘了测试不同字号、不同系统缩放、不同输入法候选框弹出后的留白变化。这些地方不显眼，但一上线就被用户截图发群里问“为啥右边切掉了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
