背景图/h1/h3响应式问题求助：如何优化小屏幕显示

嘿，我来帮你搞定这个响应式适配的问题！先梳理下你遇到的核心问题：背景图显示效果差、被菜单遮挡，还有标题元素影响背景缩放。咱们一步步来调整：

1. 修复背景图的响应式显示 #

你当前用了background-size: contain，这会让背景图保持比例但在容器内完整显示，容易留下空白，还会随着容器大小（受标题元素影响）缩放。换成cover能让背景图覆盖整个容器，同时保持比例，不会被标题元素的尺寸干扰：

.header-main {
  background-image: url("https://i.sstatic.net/EJvoD.jpg");
  background-size: cover; /* 替换contain */
  background-repeat: no-repeat;
  background-position: center;
  height: 90vh;
  min-height: 400px; /* 小屏幕下保证最小高度，避免背景图显示不全 */
  width: 100%; /* 改成100%，确保占满宽度 */
  font-family: 'Monoton', cursive;
}

2. 解决菜单遮挡问题 #

当前菜单和背景图是垂直排列的，但菜单没有背景，文字直接叠在背景图上方（其实是菜单在背景图的顶部区域）。可以给菜单添加半透明背景，既保留背景图的视觉效果，又让菜单文字更清晰：

.header-menu {
  background-color: rgba(255,255,255,0.8); /* 半透明白色背景 */
}
.header-menu__items {
  display: flex;
  list-style: none;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center; /* 让菜单文字垂直居中 */
  height: 10vh;
  padding: 0 1rem; /* 左右内边距，避免文字贴边 */
}

3. 优化标题元素的响应式 #

你的标题用vw单位是很棒的响应式做法，但可以加上最大字体限制，避免大屏幕上标题过大；同时在小屏幕下调整字体大小和布局：

.header-main h1 {
  font-size: 6vw;
  max-font-size: 80px; /* 限制最大字体 */
  color: rgb(253, 59, 101);
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  margin-left: 1rem;
  padding-top: 2rem; /* 给标题加顶部内边距，避免贴在菜单下方 */
}

.header-main__subtitle h3 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  font-size: 2vw; /* 给h3也设置响应式字体 */
  max-font-size: 30px;
}

/* 小屏幕（竖屏）下的额外调整 */
@media screen and (orientation:portrait) {
  .header-main {
    height: auto;
    min-height: 500px; /* 增大最小高度，确保背景图和标题都能显示 */
    padding-bottom: 2rem;
  }
  .header-main h1 {
    font-size: 8vw; /* 小屏幕下增大标题比例 */
    text-align: center; /* 标题居中，更美观 */
    margin-left: 0;
  }
  .header-main__subtitle h3 {
    flex-flow: column nowrap; /* 副标题改成垂直排列 */
    justify-content: center;
    text-align: center;
    font-size: 4vw;
  }
  .header-menu__item {
    padding: 1rem 0.5rem; /* 减小菜单内边距，避免挤在一起 */
  }
  .header-menu__item a {
    font-size: 0.9rem; /* 缩小菜单文字 */
  }
}

4. 调整整体布局结构 #

给<header>添加flex布局，确保菜单和背景图区域垂直排列，避免出现意外的重叠：

header {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 让header占满视口高度 */
}

修改后的完整CSS代码 #

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
body { 
  font-size: 16px; 
} 

header {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header-menu {
  background-color: rgba(255,255,255,0.8);
}

.header-menu__items { 
  display: flex; 
  list-style: none; 
  flex-flow: row wrap; 
  justify-content: space-between; 
  align-items: center;
  height: 10vh; 
  padding: 0 1rem;
} 
.header-menu__item { 
  padding: 2rem; 
} 
.header-menu__item a { 
  text-decoration: none; 
  color: rgb(253, 59, 101); 
  font-weight: bold; 
  font-family: "Courier New", Courier, monospace; 
} 
.header-menu__item a:hover { 
  border-bottom: 2px solid rgb(253, 59, 101); 
} 

.header-main { 
  background-image: url("https://i.sstatic.net/EJvoD.jpg"); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
  height: 90vh; 
  min-height: 400px;
  width: 100%; 
  font-family: 'Monoton', cursive; 
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让标题和副标题分别在顶部和底部 */
} 

.header-main h1 { 
  font-size: 6vw; 
  max-font-size: 80px;
  color: rgb(253, 59, 101); 
  display: flex; 
  flex-flow: column nowrap; 
  justify-content: space-between; 
  margin-left: 1rem; 
  padding-top: 2rem;
} 

.header-main__subtitle { 
  color: rgb(253, 59, 101); 
  margin-right: 1rem; 
  padding-bottom: 2rem;
} 

.header-main__subtitle h3 { 
  display: flex; 
  flex-flow: row nowrap; 
  justify-content: flex-end; 
  font-size: 2vw;
  max-font-size: 30px;
} 

.header-main__subtitle h3 div { 
  padding: 0.2rem; 
} 

@media screen and (orientation:portrait) { 
  .header-main { 
    height: auto; 
    min-height: 500px;
    padding-bottom: 2rem;
  }
  .header-main h1 {
    font-size: 8vw;
    text-align: center;
    margin-left: 0;
  }
  .header-main__subtitle h3 {
    flex-flow: column nowrap;
    justify-content: center;
    text-align: center;
    font-size: 4vw;
  }
  .header-menu__item {
    padding: 1rem 0.5rem;
  }
  .header-menu__item a {
    font-size: 0.9rem;
  }
}

这样调整后，背景图会完美覆盖容器，菜单有半透明背景保证文字清晰不遮挡背景视觉，标题在小屏幕下会居中且布局更紧凑，整体响应式效果会美观很多。

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