先确认视口与断点
模板响应式出问题，第一步不是改 CSS，而是检查 里有没有：
缺少这行，移动端会按桌面宽度渲染，媒体查询基本失效。
接着看模板的断点定义。常见断点有 576、768、992、1200px，但不同模板可能自定义。打开 DevTools，在 Styles 面板搜索 @media，把实际断点列出来，调试时按这些值切换，而不是凭感觉拖动窗口。
用设备模式定位溢出
水平滚动条是响应式最常见的问题。在 DevTools 设备模式下逐个检查：
- 给
body临时加overflow-x: hidden只能掩盖问题，不要作为修复手段。 - 在 Console 执行脚本找出超宽元素：
document.querySelectorAll(‘*’).forEach(el => {
if (el.offsetWidth > document.documentElement.clientWidth) {
console.log(el);
}
});
常见元凶是固定宽度的容器、未设 max-width: 100% 的图片、以及 padding 加 width: 100% 导致的盒模型溢出。
图片与媒体适配
模板里的图片建议统一：
img { max-width: 100%; height: auto; display: block; }
背景图则用 background-size: cover 配合媒体查询，在小屏替换为更小的图源。若模板用了 srcset，在 Network 面板确认不同 DPR 下加载的图片是否合理。
媒体查询的排查顺序
当某个断点样式不生效，按以下顺序检查：
- 媒体查询条件是否写错，如
max-width: 768px与min-width: 769px之间的空隙。 - 选择器优先级是否被后面的规则覆盖，可在 Computed 面板看最终生效值。
- 是否被
!important或内联样式压制。 - 是否存在拼写错误，如
widht、@media screen and (max-width:768px)缺少空格一般不影响，但漏掉and会失效。
真机验证不可省略
DevTools 模拟无法完全还原触摸滚动、字体缩放和 iOS 安全区域。真机调试建议：
- 用同一局域网，通过手机访问电脑的本地服务地址。
- 检查
env(safe-area-inset-bottom)是否处理，避免底部按钮被 Home 指示条遮挡。 - 在 iOS Safari 和 Android Chrome 各测一次，重点看横屏和字体放大后的布局。
调试完成后，用 Lighthouse 的移动端审计复查一遍，确认没有因响应式改动引入新的可访问性问题。
