Chrome响应式模式出现横向滚动条（手动缩小窗口无该问题）

• 移动端渲染模式下溢出规则的作用层级和桌面端不同：桌面端页面滚动默认由body元素控制，仅给body设置overflow-x: hidden即可截断横向溢出；但Chrome设备模拟模式、安卓移动端浏览器的页面滚动绑定在根元素<html>上，仅给body设置横向溢出隐藏不会生效，溢出内容会直接撑开布局视口，导致横向滚动条出现。
• 伪元素宽度计算异常：如果伪元素未明确指定相对定位的父容器，会默认相对于初始包含块（整个视口）计算宽度，若伪元素带有横向margin、padding、border属性且未开启border-box盒模型，实际渲染宽度会超过设定的100%，进而撑宽页面。部分场景下如果使用100vw作为伪元素宽度单位，移动端浏览器会将纵向滚动条宽度计入100vw，也会导致实际宽度超出视口。

• 给根元素和body同时配置横向溢出隐藏，清除默认边距，确保宽度和视口绑定：

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

• 全局统一盒模型规则，确保所有元素（包括伪元素）的内边距、边框都被计算在设定宽度内：

*, *::before, *::after {
  box-sizing: border-box;
}

• 明确伪元素的定位上下文：如果需要伪元素宽度匹配父容器，给伪元素的直接父级添加position: relative属性，避免伪元素相对全局视口计算宽度超出父级范围。如果伪元素之前使用了100vw作为宽度单位，统一替换为100%。
• 若伪元素需要做横向位移动效，优先使用transform: translateX()实现，不要用left/right等布局属性做偏移：transform产生的位移不会影响正常布局流，不会导致页面被撑宽。

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