移动端布局失效主因是缺失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）。
- 必须在
中加入： - 优先用设备独立像素（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 居中。
-
width: 100%保证小屏下占满可用空间 -
max-width: 1200px（或720px）防止桌面端过度拉伸 - 慎用
min-width：它可能强制出现横向滚动条，尤其在 iOS Safari 中 - 图片/视频等替换元素需额外加
max-width: 100%; height: auto;，否则不随容器缩放
flex + 百分比混合布局的实际陷阱
用 display: flex 做响应式栅格时，flex-basis 和百分比宽度容易冲突。例如给子项设 flex: 0 0 50%，但父容器有 padding，会导致换行错乱。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用
flex: 0 0 calc(50% - 8px)补偿间隙（假设间隙为16px总和） - 避免同时设置
width和flex-basis，后者会覆盖前者 - 在 iOS 12 以下，
flex: 1对百分比子元素兼容性差，建议显式写flex: 1 1 0% - 测试真机时重点看微信内置浏览器（X5 内核）和 iOS Safari，它们对
vh/vmax解析不一致，但百分比宽度基本稳定
实际项目里最常被忽略的是 box-sizing 全局重置和 viewport 标签缺失——这两项不处理，后面所有百分比和媒体查询都可能白调。
