移动端600px以下视口body左偏、hero区域偏移问题排查

根因定位 #

故障由两处样式逻辑缺陷共同触发：

• Hero区块定位上下文缺失
  .hero__text设置了position: absolute，但父容器.hero未声明position: relative，导致文本块的定位参考不是Hero容器本身，而是根视口。同时该文本块写死了左右各10em的外边距，当视口宽度低于600px时，文本块总宽度（左右外边距+内边距+边框+文本内容）远大于视口宽度，产生无约束横向溢出，浏览器计算的可滚动宽度超出视口，整个页面会被溢出内容带动出现左偏移。
• 正文区域宽度计算异常
  小屏断点下.content被设置了width: fit-content属性，加上内部存在硬编码width="500px"的hr分割线，会让正文区域宽度随内部固定宽度元素撑开，进一步干扰浏览器视口宽度计算。之前把Hero移入Content能临时修复，本质是让Hero跟随Content撑开的宽度渲染，并未解决根源的溢出问题。

故障表现参考：

修复步骤 #

无需调整DOM结构，仅修改样式即可解决，不影响原有样式拆分的维护逻辑：

1. 补全Hero容器的定位与溢出约束
   修改Hero区域SCSS代码，补全定位上下文，替换固定外边距为响应式边距：

.hero {
  position: relative; // 新增：建立内部绝对定位元素的参考上下文
  width: 100%;
  overflow-x: hidden; // 新增：拦截内部元素横向溢出
  &__image {
    background-image: url("../images/heroimage_fadeout.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    min-height: 110vh;
    width: 100%;
    position: relative;
  }

  &__text {
    position: absolute;
    bottom: 50px;
    padding: 1em;
    // 删除原固定margin-left、margin-right属性，改用定位+响应式边距
    left: 0;
    right: 0;
    margin-inline: 1em; // 小屏下左右保留1em安全边距
    text-align: center;
    background-color: #f8f069;
    border: solid black;
    font-size: 1.2em;

    // 大屏断点下恢复原有的宽边距效果
    @include breakpoint-up(large) {
      margin-inline: 10em;
    }
  }
}

2. 修正正文区域小屏宽度逻辑
   调整Content区域小屏样式，删除会导致宽度异常的fit-content设置，同时把硬编码宽度的hr改为自适应：

.content {
  padding: 1.6em;

  @include breakpoint-up(large) {
    margin: 0 0 5rem;
  }

  @include breakpoint-down(small) {
    padding: 5em 1em 1em 1em;
    // 替换原width: fit-content为宽度约束
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  /* 其余原有Content样式保持不变 */
}

// 新增hr自适应样式，替换标签上硬编码的500px宽度
.content_box hr {
  max-width: 500px;
  width: 100%;
}

3. 增加全局横向溢出兜底
   全局样式中补全根元素的宽度与溢出约束，避免其他隐藏元素触发横向滚动：

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
}

效果验证 #

修改完成后在600px以下视口测试：

• Hero图片不再向左偏移，页面右侧空白消失
• Hero文本块自动适配视口宽度，不会出现横向溢出
• 原有桌面端布局效果完全保留
• 视口进一步缩小也不会复现偏移故障

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