新手求助：响应式元素适配问题（屏幕宽度≤590px时文本重叠，需实现目标样式）

这个问题我之前做项目时也碰到过，核心是没给小屏幕尺寸设置适配的布局规则，导致flex容器里的元素被强行挤压在一起。咱们一步步来修复：

问题分析 #

你的.nav-section用了display: flex，但默认的flex-wrap: nowrap会让子元素（.header和.nav-parent）在小屏幕下强制保持一行，再加上.header h1设置了line-height: 1px，直接导致标题和描述文本重叠。

解决方案 #

我们需要添加媒体查询，针对屏幕宽度≤590px的情况调整布局，让元素垂直排列并优化内容间距：

修改后的完整代码 #

<html>
<head>
<style>
.nav-section {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  align-items: center;
  padding: 1rem;
  /* 新增：默认允许换行，避免极端小屏提前挤压 */
  flex-wrap: wrap;
}
.header h1 {
  line-height: 1.2; /* 修复原line-height:1px导致的文本重叠问题 */
  margin-bottom: 0.5rem;
}
.header {
  flex: 60%;
}
.nav-parent {
  flex: 40%;
}
.header span {
  font-size: 12.8px;
  font-weight: 100;
  font-style: italic;
  display: block; /* 让描述独占一行，避免和标题挤在一起 */
}
ul li {
  list-style: none;
}
ul li ~ li {
  margin-left: 8px;
}
.btn {
  flex: 1;
  padding: 8px 0;
  text-align: center;
}
.menu {
  display: flex;
  justify-content: center;
  color: #555;
  font-size: 12.8px;
}
.active {
  background: #21759B;
  color: #ffffff;
}

/* 媒体查询：针对屏幕宽度≤590px的情况 */
@media (max-width: 590px) {
  .nav-section {
    flex-direction: column; /* 改为垂直排列 */
    align-items: flex-start; /* 让内容左对齐，更符合移动端阅读习惯 */
  }
  .header {
    flex: 100%; /* 占满整行宽度 */
    margin-bottom: 1rem; /* 和导航栏拉开间距 */
  }
  .nav-parent {
    flex: 100%; /* 占满整行宽度 */
  }
  .menu {
    justify-content: flex-start; /* 菜单左对齐 */
    flex-wrap: wrap; /* 菜单选项过多时自动换行 */
  }
  .menu li {
    margin-bottom: 0.5rem; /* 换行后选项之间的垂直间距 */
  }
}
</style>
<body>
<div class="nav-section">
  <div class="header">
    <h1>Lorem Ipsum</h1>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor magna ullamcorper, tristique lorem eu, facilisis elit.</span>
  </div>
  <div class="nav-parent">
    <ul class="menu">
      <li class="option active btn">Option</li>
      <li class="option1 btn">Option1</li>
      <li class="option2 btn">Option2</li>
      <li class="option3 btn">Option3</li>
      <li class="option4 btn">Option4</li>
      <li class="option5 btn">Option5</li>
    </ul>
  </div>
</div>
</body>
</html>

关键修改点说明 #

• 修复基础文本重叠：把.header h1的line-height从1px改成1.2，让标题文本有正常行高；给<span>添加display:block，确保描述文本独占一行。
• 媒体查询适配小屏：
  • 将.nav-section的flex-direction改为column，让标题区和导航栏垂直排列，彻底解决横向空间不足的问题。
  • 让.header和.nav-parent都占满100%宽度，保证内容在小屏上有足够展示空间。
  • 给菜单添加flex-wrap: wrap，当选项过多时自动换行，避免横向溢出。

调整后，当屏幕宽度低于590px时，页面会自动切换为垂直布局，内容不会再重叠，同时保持良好的可读性。

内容的提问来源于stack exchange，提问作者Harpreet Singh Kapula