如何解决窗口缩放时header收缩、文本被截断的问题？

我的header区块在电脑和平板尺寸下显示正常，但调整到iPhone宽度时，区块大幅缩小，文本侵入其他区块且右侧被截断。尝试单独给它创建区块设置样式，结果直接覆盖了navbar，其他区块都没问题，不知道哪里错了。

现有代码 #

CSS #

header {
  height: 100vh;
  max-width: 100vw;
  position: relative;
  top: 5rem;
  display: grid;
  place-items: center;
  z-index: 0;
  background-color: #fff;
}

header .container {
  display: grid;
  grid-template-columns: 30rem auto 17rem;
  align-items: center;
  max-height: 100%;
  margin-top: -3rem;
}

header .container .info p {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 1rem 0 2rem;
}

header .container .info h1 {
  color: gray;
}

header .container .info .cta {
  display: flex;
  align-items: center;
}

HTML #

<header>
<div class="container">
  <div class="info">
    <h1>Basketball Today</h1>
  </div>
</div>
</header>

问题根源及修复方案 #

• 固定宽度网格列导致溢出
  grid-template-columns: 30rem auto 17rem在小屏幕下，固定宽度的列总和超过视口宽度，直接导致内容截断。
  修复：添加媒体查询，移动端切换为单列布局：

  @media screen and (max-width: 768px) {
    header .container {
      grid-template-columns: 1fr;
      padding: 0 1rem;
      text-align: center;
    }
  }
  

• Relative定位导致Navbar被覆盖
  top: 5rem的相对定位会让header在小屏幕上和固定定位的Navbar重叠，改用margin-top替代更稳妥：

  header {
    /* 替换top:5rem为margin-top */
    margin-top: 5rem;
    /* 强制隐藏横向溢出，避免出现滚动条 */
    overflow-x: hidden;
  }
  

• 文本溢出优化
  给标题添加自动换行属性，防止长文本超出容器：

  header .container .info h1 {
    color: gray;
    overflow-wrap: break-word;
  }
  

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