页面宽度低于480px时body右侧padding消失的原因咨询

当页面宽度低于480px时，body右侧padding看似消失，核心原因是设置了min-width: 450px的元素触发了横向滚动，导致body的右侧padding被挤出可视区域：

• body设置了padding: 0 1rem，左右各占约16px（默认根字体大小为16px），总额外宽度32px。
• footer、nav、.jour-hero等元素被设置了min-width: 450px，当视口宽度小于450px + 32px = 482px时，这些元素会强制保持450px的最小宽度，加上body的左右padding，整体内容总宽度会超过当前视口宽度，页面出现横向滚动条。
• 此时可视区域是滚动后的左侧部分，body的右侧padding实际存在，但被滚到了可视区域之外，所以看起来像是消失了。

另外你的.article-container使用grid-template-columns: repeat(auto-fill, minmax(450px, auto))，网格项会保持最小450px宽度，进一步加剧了横向溢出的问题。

• 针对小屏幕设备，添加媒体查询，降低或移除相关元素的min-width限制：

@media (max-width: 480px) {
  footer,
  nav,
  .jour-hero,
  .about-hero,
  .hero {
    min-width: auto; /* 也可设置为100%，让元素自适应视口宽度 */
  }
}

• 同时调整网格布局的最小列宽，适配小屏幕：

@media (max-width: 480px) {
  .article-container {
    grid-template-columns: repeat(auto-fill, minmax(100%, auto));
  }
}

• 若临时需要隐藏横向滚动条，可给body添加overflow-x: hidden，但这只是治标方案，更推荐使用媒体查询从根源适配小屏幕。

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