如何响应地将 div 转换为手风琴

手风琴是一种非常流行且常用的页面展示方式，它可以将多个内容块紧凑的展示在一个区域内，缩短页面的长度，使页面更加美观和易读。

在实现手风琴功能的过程中，我们通常会使用 HTML 和 CSS 进行开发。下面是一个简单的示例代码。

HTML 代码

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-title">标题 1</h3>
    <div class="accordion-content">
      <p>内容区块 1</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-title">标题 2</h3>
    <div class="accordion-content">
      <p>内容区块 2</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-title">标题 3</h3>
    <div class="accordion-content">
      <p>内容区块 3</p>
    </div>
  </div>
</div>

CSS 代码

.accordion {
  border: 1px solid #ddd;
  margin: 20px;
}

.accordion .accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion .accordion-title {
  margin: 0;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}

.accordion .accordion-content {
  display: none;
  padding: 10px;
}

.accordion .accordion-item.active .accordion-content {
  display: block;
}

在上面的代码中，我们创建了一个 <div class="accordion"> 的元素作为手风琴容器。其中 accordion-item 类表示每个手风琴的子项，accordion-title 类表示每个手风琴子项的标题，accordion-content 类表示每个手风琴子项的内容区块。在 CSS 中，我们设置了一些基础样式，并使用 .accordion .accordion-item.active .accordion-content 的样式将当前展开的手风琴项的内容区块显示出来。

为了使手风琴可以响应式地展示在不同的屏幕上，我们还需要添加一些响应式样式。下面是一个示例代码。

响应式 CSS 代码

@media (max-width: 768px) {
  .accordion .accordion-item.active .accordion-content {
    display: block;
  }

  .accordion .accordion-title {
    text-align: center;
  }

  .accordion .accordion-item:not(.active) .accordion-content {
    display: none;
  }
}

在上面的代码中，我们使用了媒体查询的方式，根据屏幕的宽度动态地调整样式。在屏幕宽度小于 768px 的情况下，我们设置手风琴项的标题居中显示，并将当前展开的手风琴项的内容区块显示出来，同时隐藏其他手风琴项的内容区块。

通过上述代码，在 HTML 和 CSS 的基础上，您可以轻松地将 div 元素转换为手风琴，并且使它响应式地展示在不同的屏幕上。