如何通过Media Query根据屏幕尺寸优化多组件UI布局？

需求回顾 #

需要实现五组组件（Button、Text、Dropdown、Pagination、Icon）的响应式布局：

• 大屏（≥990px）：所有组件单行排列
• 中屏（≤990px）：3行布局（Button单独一行，Text+Dropdown一行，Pagination+Icon一行）
• 小屏（≤575px）：4行布局（Button、Text、Dropdown各占一行，Pagination+Icon一行）

优化实现方案 #

优化后的HTML结构

移除冗余嵌套容器，让结构更扁平直观：

<div class="container">
  <div class="component-group">
    <div class="component buttons">
      <button> button 1 </button>
      <button> button 2 </button>
      <button> button 3 </button>
      <button> button 4 </button>
      <button> button 5 </button>
    </div>
    <div class="component text">
      <span> I am a Text! </span>
    </div>
    <div class="component dropdown">
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Choose letter <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><span>A</span></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
    <div class="component pagination">
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item"><a class="page-link" href="#">Previous</a></li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
      </nav>
    </div>
    <div class="component icon">
      <i class="bi bi-gear"></i>
    </div>
  </div>
</div>

优化后的CSS代码

采用移动优先策略，减少重复代码，逻辑更清晰：

/* 小屏默认样式（≤575px）：4行布局 */
.component-group {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 统一组件间距，替代分散的margin-top */
  margin-top: 30px;
}

/* 中屏样式（>575px 且 ≤990px）：3行布局 */
@media (min-width: 576px) and (max-width: 990px) {
  .component-group {
    flex-wrap: wrap;
    flex-direction: row;
  }
  .buttons {
    width: 100%; /* Button单独占满一行 */
  }
  .text, .dropdown {
    flex: 1; /* Text与Dropdown平分当前行宽度 */
  }
  .pagination, .icon {
    flex: 1; /* Pagination与Icon平分当前行宽度 */
  }
}

/* 大屏样式（≥990px）：单行布局 */
@media (min-width: 991px) {
  .component-group {
    flex-direction: row;
    align-items: center; /* 垂直居中所有组件，优化视觉效果 */
  }
  .component {
    flex: auto; /* 组件根据内容自适应宽度 */
  }
}

优化点说明 #

1. 移动优先策略：先定义小屏基础样式，再通过媒体查询逐步覆盖大屏样式，避免重复编写相同属性，代码更精简。
2. 扁平结构：移除冗余的嵌套容器，HTML结构更直观，降低维护成本。
3. 统一间距控制：用gap替代分散的margin-top，实现组件间间距的统一管理，布局更规整。
4. 灵活的flex属性：利用flex-wrap、flex、width:100%等属性精准控制不同断点下的组件排列，逻辑清晰易维护。
5. 视觉对齐优化：大屏模式下添加align-items:center，让所有组件在垂直方向居中，提升整体视觉协调性。

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