网站移动端响应式出现CSS横向偏移 右侧显示异常问题求助

问题根源与修复方案 #

移动端页面横向滑动偏移是因为存在宽度超出视口的元素导致水平溢出，可按以下步骤排查修复：

• 第一步先快速定位溢出元素：在Chrome控制台的Elements面板的Styles标签页给全局添加临时样式* { outline: 1px solid red !important; }，所有元素会被红框标注，超出视口的元素可直接肉眼识别。
• 优先修复全局基础规则：在你的全局CSS文件中添加以下代码，先从根节点限制水平溢出：

html, body {
  overflow-x: hidden;
  width: 100%;
}
* {
  box-sizing: border-box;
}

• 排查盒模型溢出问题：检查所有设置了width: 100%的块级元素，是否额外设置了左右margin或padding，未开启border-box的情况下会导致元素总宽度超过100%引发溢出。
• 排查定位元素溢出：检查所有设置了position: absolute或position: fixed的元素，是否存在left/right偏移值设置不当，导致元素部分区域超出视口范围。
• 排查媒体元素溢出：检查页面内的图片、视频、表格等元素是否设置了max-width: 100%，未做适配的大尺寸固定宽媒体元素会直接撑宽页面。
• 排查网格/弹性布局溢出：如果使用了Flex或Grid布局，检查是否设置了flex-wrap: wrap，未开启换行的情况下子元素总宽度超过父容器也会引发水平溢出。

内容的提问来源于stack exchange，提问作者Taqi Baqar