直接写 width: 1200px 在手机上会触发横向滚动条，因其强制固定宽度无视视口尺寸；正确响应式写法是 width: 100% + max-width: 1200px + margin: 0 auto，并确保容器处于文档流且 box-sizing: border-box。
为什么直接写 width: 1200px 在手机上会出横向滚动条
因为 width 是强制固定值，不管视口多窄，浏览器都会按 1200px 渲染，超出部分触发水平滚动。移动端用户一滑就卡顿，体验直接崩。这不是“居中失败”，而是布局失控。
max-width 必须搭配 width: 100% 才真正响应式
只写 max-width: 1200px 不够——块级元素默认 width: auto，它仍会撑满父容器（比如 body），max-width 只是“上限”，不主动收缩。
- 正确写法：
width: 100%+max-width: 1200px，小屏时占满，大屏时卡在 1200px - 必须加
margin: 0 auto，否则即使宽度受限，也会左贴边 - 记得全局设
* { box-sizing: border-box }，否则padding和border会额外加宽，突破max-width
超宽屏下内容空旷？用 min() 函数动态取舍
纯像素值如 1200px 在 4K 屏上左右留白巨大；纯 90vw 在小屏又可能过窄。现代浏览器支持 min()，直接解决：
-
max-width: min(1440px, 90vw)：取两者中更小的值，防溢出也防局促 - 兼容性注意：Safari 15.4+、Chrome 79+、Firefox 86+ 支持；老版本 Safari 需降级为媒体查询兜底
- 别写
max-width: 80%——它依赖父容器宽度，而body默认没设宽，结果常是 980px，失效
导航栏全屏、内容区受限，HTML 结构不能乱
常见错误是把 max-width 直接加在 body 上，结果整个页面（包括导航）都被限制。关键在结构分离：
-
nav或header单独设width: 100%，背景铺满 -
main或自定义.container设max-width+margin: 0 auto - 避免
body有默认margin，加body { margin: 0 }防干扰 - 如果
main是display: flex的子项，margin: 0 auto无效，得用justify-content: center
实际最易被忽略的是：容器是否真的在常规文档流里。浮动、绝对定位、Flex 子项、行内元素，都会让 margin: 0 auto 形同虚设——先检查 display 和父容器布局模式，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
