元素的响应性问题

Issues with the responsiveness of elements

作为新手,我 运行 遇到了代码响应元素的问题。

<html>
<head>
<style>
.nav-section {display: flex; justify-content: center; font-family: sans-serif; align-items: center; padding: 1rem;}

.header h1 {line-height: 1px;}

.header {flex: 60%;}

.nav-parent {flex: 40%;}

.header span {font-size: 12.8px; font-weight: 100; font-style: italic;}

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;}
</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>
</head>
</body>
</html>

在 590 像素以下,“Lorem Ipsum”文本相互合并。

当我将屏幕尺寸折叠到 591 像素以下时,我希望响应式元素看起来像这样。

我应该怎么做才能达到上面发布的图片的效果?

设置行高大于原来的字体大小。如果您不确定,请设置 line-height: 1

<html>
<head>
<style>
.nav-section {display: flex; justify-content: center; font-family: sans-serif; align-items: center; padding: 1rem;}

.header h1 {line-height: 1;}

.header {flex: 60%;}

.nav-parent {flex: 40%;}

.header span {font-size: 12.8px; font-weight: 100; font-style: italic;}

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;}
</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>
</head>
</body>
</html>

或考虑在响应式视图中更改其字体大小。

一个好的起点 - https://www.w3schools.com/cssref/css3_pr_mediaquery.asp