错位主因是dom被浏览器静默修正、viewport未生效或栅格类被margin撑爆；需先检查html合法性、viewport配置及margin位置，再调整css。
错位不是样式没写对，是结构或渲染机制被浏览器悄悄改了——先查 DOM 是否和你写的 HTML 一致，再动 CSS。
检查 DOM 是否被浏览器自动修正
浏览器遇到非法嵌套（比如 <p></p> 里塞 <div>）会强制闭合标签，导致后续元素“飘”到外面。这是最隐蔽的错位源头。
<ul>
<li>打开 DevTools → Elements 面板，右键父容器 → “Edit as HTML”，删一个字符再回车：如果子元素整体跳出去，说明原始 HTML 已被修正</li>
<li>运行 <code>document.body.innerHTML，和你本地源码逐行比对，多出/消失的 <section></section> 或 都是线索
Element div not allowed as child of element p 必须优先修复确认 viewport 配置是否生效
没配对 <meta name="viewport" content="width=device-width, initial-scale=1.0">，浏览器就按 980px 渲染再缩放，所有媒体查询、rem 计算、flex 布局全失效。
- 必须放在
中，且不能被 JS 动态插入（WebView 下尤其无效） - 禁止写成多行或带多余空格：
content=" width=device-width "会被某些旧 WebView 忽略 - 删掉
user-scalable=no和maximum-scale=1.0：它们不仅违反无障碍规范，还会让 Safari 双击放大失效
避免 margin 破坏栅格宽度计算
直接给栅格类（如 .col-lg-4）加 margin-left/right，会让它实际宽度超出 33.33%，三个并排就必然换行。
- 正确做法：把
margin移到栅格单元内部的内容容器上，比如<div class="col-lg-4"><div class="card">…</div></div>，样式只写在.card - 全局加
box-sizing: border-box，确保padding和border不撑破宽度 - 慎用
float：现代布局优先用flex或grid，float清除不干净极易塌陷
响应式单位与图片处理的关键细节
用 px 写宽高、行高、圆角、内边距，在用户缩放到 200% 时会彻底失弹性；图片没设 max-width: 100% 会直接冲出容器。
- 字体根字号推荐：
html { font-size: clamp(1rem, 2.5vw, 1.25rem); }，兼顾小屏不溢出、大缩放不糊字 - 图片必须加：
img { max-width: 100%; height: auto; }，否则 DPR=3 的设备上会横向溢出 - 表格错位？加
table-layout: fixed; width: 100%，再给每列显式设百分比宽（如th:nth-child(1) { width: 25% }），总和严格为 100%
真正卡住人的从来不是“怎么写响应式”，而是 DOM 被静默修正、viewport 没生效、栅格类被 margin 撑爆——这些点不先堵住，调再多 CSS 都是往漏桶里注水。
