问题

我的页眉部分和文本在计算机和平板电脑上看起来很好，但当窗口调整到 iPhone 的宽度时，该部分变得明显较小，文本会进入其他部分并被右边缘切掉。我尝试创建一个部分并对其进行样式设置，但那时它完全覆盖了导航栏。我的其他部分没有遇到这个问题，我不确定我忽略了什么。

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;
}

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

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;
}

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

答案1

得分: 2

为了防止窗口调整大小时标题收缩并截断文本，您可以使用CSS属性来控制标题元素的行为。以下是一些您可以考虑的方法：

1：设置最小宽度
您可以使用min-width属性为标题元素指定最小宽度。这可以确保在窗口缩小时标题保持一定的宽度。例如：

header {
    min-width: 800px;
}

根据您的最小宽度需求调整800px的值。

2：使用溢出
通过将overflow属性设置为auto或scroll，您允许标题在内容超出可用宽度时显示水平滚动条。这样，文本不会被截断，用户可以水平滚动以查看整个内容。例如：

header {
    overflow: auto;
}

3：实施响应式设计
考虑应用响应式设计技巧，使标题及其内容适应不同的屏幕尺寸。这涉及使用CSS媒体查询，并根据可用空间调整布局和样式。例如，您可以使用CSS的flexbox或grid来创建灵活且响应式的标题。以下是一个使用flexbox的示例：

header {
    display: flex;
    flex-wrap: wrap;
}

header .logo {
    flex: 0 0 300px; /* 为标志设置固定宽度 */
}

header .menu {
    flex: 1; /* 允许菜单根据需要增长和收缩 */
}

在这个示例中，标志具有固定宽度，而菜单会扩展以填充剩余空间。随着窗口的调整大小，标题元素会相应地调整。

4：考虑使用响应式框架
如果手动实施响应式行为让您感到困难，可以考虑使用响应式的CSS框架，如Bootstrap或Foundation。这些框架提供预构建的组件和响应式网格系统，可以自动处理调整大小和布局调整。

header {
        min-width: 800px;
       }

header {
  overflow: auto;
}

header {
  display: flex;
  flex-wrap: wrap;
}

header .logo {
  flex: 0 0 300px; /* Set a fixed width for the logo */
}

header .menu {
  flex: 1; /* Allow the menu to grow and shrink as needed */
}

答案2

得分: 0

代码示例如下：

看起来问题可能出在你提供的代码中，`grid-template-columns` 属性在 `.container` 类中。对于较小屏幕的设备，如 iPhone，`30rem`、`auto` 和 `17rem` 中提供的固定宽度可能不够响应。

你可以考虑使用 CSS 媒体查询来更改容器的样式和大小，使标题部分对各种屏幕尺寸更具响应性。下面是如何更改你的代码的示例：

```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: auto;
  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;
}

header .container .info .cta h3 {
  color: var(--color-light-gray);
}

/* 用于较小屏幕的媒体查询 */
@media screen and (max-width: 768px) {
  header .container {
    grid-template-columns: auto;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
  }

  header .container .info p {
    font-size: 1rem;
  }
}

在上面的源代码中，我将 .container 类中的 grid-template-columns 的固定宽度更改为 auto，允许根据内容更改列的宽度。此外，我增加了字体大小，并更改了布局，以适应最大宽度为 768 像素的显示屏，这在 iPhone 上很常见。

通过使用媒体查询并根据屏幕尺寸更改布局，你应该能够使标题部分更具响应性，从而避免在较小设备上截断文本。你可以根据自己的需求修改媒体查询的值和样式。

<details>
<summary>英文:</summary>
It appears that the problem may be with the `grid-template-columns` property in the `.container` class based on the code you provided. For devices with smaller screens, like iPhones, the fixed widths provided in `30rem`, `auto`, and `17rem` may not be responsive enough.
You might think about using CSS media queries to change the container&#39;s style and size to make the header section more responsive to various screen sizes. An illustration of how you could change your code is as follows:
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: auto;
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;
}
header .container .info .cta h3 {
color: var(--color-light-gray);
}
/* Media query for smaller screens */
@media screen and (max-width: 768px) {
header .container {
grid-template-columns: auto;
justify-content: center;
text-align: center;
padding: 0 1rem;
}
header .container .info p {
font-size: 1rem;
}
}
In the source code above, I changed the fixed widths of the `grid-template-columns` in the `.container` class to `auto`, allowing the columns to change width according on the content. Additionally, I increased the font size and changed the layout to accommodate displays with a maximum width of 768 pixels, which are common of iPhones.
You should be able to make the header section more responsive and stop the text from being cut off on smaller devices by using media queries and altering the layout dependent on screen size. You are allowed to modify the media query&#39;s values and styling to suit your unique requirements.
</details>