如何通过CSS在超窄屏幕上逐步减少水平padding以避免横向滚动

这个需求太常见了，我自己做响应式项目时也经常碰到这种情况——不想让小屏用户出现横向滚动，但又想在屏幕够宽的时候保持舒适的边距。别担心，用CSS的clamp()函数就能一步搞定，不用写一堆媒体查询，代码干净还灵活。

你的核心需求其实很清晰：

• 屏幕宽度≥368px时，完全保留原来的样式：左右24px padding，body宽度控制在368px到768px之间，居中显示
• 屏幕在320px到367px之间时，逐步把padding从24px降到0，让内容刚好填满屏幕，彻底避免横向滚动
• 屏幕≤320px时，直接把padding设为0，作为最后一道防线

下面是修改后的完整CSS代码，直接替换你原来的body样式就行：

body {
  max-width: 768px;
  min-width: 320px;
  margin: 0 auto;
  /* 动态计算左右内边距 */
  padding-left: clamp(0px, calc((100vw - 320px) / 48 * 24), 24px);
  padding-right: clamp(0px, calc((100vw - 320px) / 48 * 24), 24px);
}

我给你拆解一下关键部分：

• max-width: 768px 和 margin: 0 auto：和你原来的设置完全一致，宽屏时的显示效果丝毫不改
• min-width: 320px：保证屏幕宽度小于320px时，内容不会被压缩得太窄，维持最基础的可读性
• 重点是padding的clamp()函数，它的三个参数分别对应：
  • 最小值0px：当屏幕≤320px时，padding直接归零，彻底杜绝滚动
  • 最大值24px：当屏幕≥368px时，padding保持你原本的24px，完全不影响原有体验
  • 中间的calc((100vw - 320px) / 48 * 24)：这是实现线性渐变的核心
    • 48是368-320的差值，也就是我们需要调整padding的屏幕宽度区间
    • 24是我们要从0逐步增加到的最大padding值
    • 这个计算式会自动根据当前屏幕宽度算出对应的padding——比如你提到的340px屏幕，算出来的结果刚好是10px，和你想要的效果完全匹配；到368px时又精准回到24px，无缝衔接原有样式

如果你想调整渐变的节奏，比如让padding减少得更快或更慢，只需要修改计算式里的数值就行，不过线性变化已经足够自然，用户体验也最好。

内容来源于stack exchange