小视口下标题溢出导致网页超出边界、footer右侧留白问题咨询

问题根因 #

• 你当前设置的h2字号响应式断点仅在视口宽度小于250px时才会从60px降到40px，但市面主流小屏手机的视口宽度多在320px-360px区间，这个区间内60px的字号渲染出来的总宽度远超过视口宽度，直接把父级Grid容器撑开，才会导致页面整体宽度超出视口，footer右侧出现空白。
• 额外排查点：如果你的CSS Grid列配置用了固定宽度，或者没有设置minmax(0, 1fr)的自适应列规则，Grid默认的min-width: auto会让容器被长内容强行撑开，进一步加剧溢出问题。

修复方案 #

1. 调整标题字号的响应式规则

推荐用clamp()实现自动适配的响应式字号，不用写多段媒体查询，适配更平滑：

h2, .h2 {
  /* 取值说明：最小字号32px，中间段随视口宽度线性缩放，最大字号60px */
  font-size: clamp(32px, 5vw + 0.8rem, 60px);
}

如果习惯用分段媒体查询，直接调整断点阈值即可：

h2, .h2 {
  font-size: 60px;
}

/* 把断点从250px上调到360px，覆盖小屏手机场景 */
@media (max-width: 360px) {
  h2, .h2 {
    font-size: 36px;
  }
}

@media (max-width: 250px) {
  h2, .h2 {
    font-size: 28px;
  }
}

2. 修复CSS Grid的列配置

给Grid容器加上自适应列规则，避免容器被长内容强行撑开：

.gallery-page {
  display: grid;
  /* minmax(0, 1fr)允许列宽收缩到小于内容宽度，避免溢出 */
  grid-template-columns: minmax(0, 1fr);
}

3. 必查项：确认视口元标签配置

检查页面head标签内是否加了正确的视口配置，没有的话补上：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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