移动端布局失效主因是缺失viewport标签和box-sizing未重置；width:100%受父容器padding/border影响；媒体查询需用dip断点（如max-width:480px）并遵循移动优先顺序，配合max-width防拉伸、flex-basis与百分比协调。
移动端布局失效的常见原因
直接写 width: 100% 不一定让元素填满屏幕，尤其当父容器有 padding、border 或未重置 box-sizing 时。更常见的是媒体查询没生效——比如漏写了 meta viewport 标签，或用了错误的断点值（如把 max-width: 768px 当成手机断点，实际很多安卓机视口宽度是 360px 或 414px）。
- 必须在
中加入：<meta name="viewport" content="width=device-width, initial-scale=1"> - 优先用设备独立像素（dip）断点，例如
max-width: 480px覆盖多数小屏手机，而非依赖设备物理分辨率 -
width: 100%是相对于父容器计算的，不是屏幕宽度；若父级有margin或padding，子元素会溢出或缩窄
用媒体查询适配主流手机尺寸
别堆砌一堆断点，聚焦三个关键区间：小屏（≤480px）、中屏（481px–768px）、大屏（>768px）。注意顺序：移动优先，先写默认样式（小屏），再用 @media (min-width: ...) 覆盖更大屏幕。
- 小屏默认样式建议用
width: 100%+box-sizing: border-box，避免 padding 撑开宽度 - 避免写
@media screen and (max-width: 320px)这类过窄断点——iPhone SE（375px）和多数安卓机都比这宽 - 如果用 CSS-in-JS 或 PostCSS，确认媒体查询被正确解析；Webpack 的
css-loader默认不支持嵌套媒体查询，需配postcss-preset-env
@media (min-width: 481px) {
.container { width: 90%; }
}
@media (min-width: 769px) {
.container { width: 720px; margin: 0 auto; }
}
百分比宽度配合 max-width 防止拉伸变形
纯 width: 100% 在大屏上会让内容过宽、文字难读。正确做法是设 max-width 限制最大宽度，再用 margin: 0 auto 居中。
