在网页设计中，实现元素高度自适应并能根据不同情况响应式变化是一项常见需求。本文将详细介绍如何使用 CSS 达成两行高度自适应，且第二行高度响应式变化的效果。

我们要明确这种布局的应用场景。比如在产品介绍模块，第一行可能展示产品名称，第二行展示简短描述，第二行的字数可能因产品不同而有差异，这时就需要第二行高度能灵活变化。

实现这种布局的一种有效方法是使用弹性布局（Flexbox）或网格布局（Grid Layout）。这里以 Flexbox 为例进行讲解。

我们先创建一个包含两行内容的 HTML 结构，例如：

<div class="parent">
  <div class="first-line">第一行内容</div>
  <div class="second-line">第二行内容，长度可变，需要自适应高度</div>
</div>

接着编写 CSS 代码。对父元素设置 display: flex; flex-direction: column;，这样子元素就会垂直排列。为第一行元素设置固定高度，比如 height: 50px;，以确保它的高度稳定。对于第二行元素，关键在于设置 flex-grow: 1;，这表示第二行元素会自动填充剩余空间，实现高度自适应。还可以根据需求设置一些其他样式，如 overflow-y: auto;，当第二行内容过多时，出现垂直滚动条，保证页面布局的整洁。完整的 CSS 代码如下：

.parent {
  display: flex;
  flex-direction: column;
}
.first-line {
  height: 50px;
}
.second-line {
  flex-grow: 1;
  overflow-y: auto;
}

如果想使用网格布局，同样先构建 HTML 结构，然后对父元素设置 display: grid; grid-template-rows: auto 1fr;，这里 auto 表示第一行高度自适应内容，1fr 让第二行占据剩余空间。

在实际项目中，还需考虑响应式设计。可以通过媒体查询，根据不同屏幕尺寸调整两行的样式，比如在小屏幕上适当减小第一行的固定高度，以保证第二行有足够空间展示内容。

通过上述方法，我们就能轻松实现 CSS 两行高度自适应且第二行高度响应式变化，为网页设计带来更多的灵活性和良好的用户体验。