移动端错位主因是flex/grid未适配小屏：flex需设wrap、禁用固定min-width；grid宜用auto-fit+minmax；须配合理viewport、box-sizing及断点media query。
移动端错位，通常不是媒体查询没写，而是 flex 或 grid 的行为在小屏下没被正确约束——比如子项不换行、最小宽度撑破容器、或网格轨道没随屏幕收缩。
检查 flex 容器的 flex-wrap 和 min-width
Flex 默认 不换行（flex-wrap: nowrap），内容多时会横向溢出。同时，子项若设了 min-width: 200px 这类固定值，在 375px 屏幕上两个就超宽了。
- 给 flex 容器加
flex-wrap: wrap - 子项避免写死
min-width，改用flex: 1 1 auto或flex: 1让其弹性收缩 - 必要时用
max-width: 100%防止图片/卡片撑开布局
Grid 布局中别依赖固定列数
写 grid-template-columns: repeat(4, 1fr) 在手机上会强行分 4 列，每列只有约 90px，文字挤成一团甚至错位。
- 改用
repeat(auto-fit, minmax(240px, 1fr)))：最小 240px，够就多列，不够自动减少列数 - 配合
gap替代 margin，避免响应式下外边距叠加错乱 - 对 grid 子项也加
min-width: 0，防止内部文本或图片强制撑宽
Media query 要覆盖关键断点，且优先级合理
只写 @media (max-width: 768px) 不够——iPhone SE 是 375px，折叠屏可能更小。同时，CSS 后写的规则会覆盖前面的，别让 PC 样式意外生效。
- 常用断点建议：
320px（老小屏）、375px（主流 iPhone）、480px（部分安卓）、768px（平板竖屏） - 把移动端样式写在后面，或用
min-width从移动开始向上增强（mobile-first） - 用
devtools 的设备模拟器 + “Toggle device toolbar”实时调，别只靠预设尺寸猜
别忽略 viewport 和 box-sizing
如果页面没加 viewport meta，或者所有元素没统一盒模型，再好的 media query 和 flex 也会失效。
- 确保 HTML 有：
- CSS 开头加：
* { box-sizing: border-box; }，避免 padding/border 加在 width 外导致计算偏差 - 对图片、iframe 等替换元素，统一加
max-width: 100%; height: auto;
错位问题往往卡在某个细节：可能是 flex 子项忘了设 flex-shrink: 1，也可能是 grid 的 auto-fit 写成了 auto-fill。一行一行 inspect 元素的 computed 样式，比反复改 media query 更快定位根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
