结合媒体查询动态切换布局

媒体查询（Media Query）是响应式设计的核心，配合 Flex/Grid 实现不同屏幕下的布局切换。

媒体查询基础

语法

@media (条件) {
  /* 符合条件时应用的样式 */
}

常用断点

响应式 Flex 布局

列表与网格切换

.container {
  display: flex;
  flex-direction: column;  /* 移动端：垂直列表 */
  gap: 16px;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;     /* 平板及以上：水平排列 */
    flex-wrap: wrap;
  }

  .item {
    flex: 1 1 calc(50% - 8px);  /* 两列 */
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 1 1 calc(25% - 12px);  /* 四列 */
  }
}

导航响应式

.nav {
  display: flex;
  flex-direction: column;  /* 移动端：垂直导航 */
}

.nav-item {
  padding: 12px;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;    /* 平板及以上：水平导航 */
    gap: 24px;
  }
}

响应式 Grid 布局

动态列数

.container {
  display: grid;
  grid-template-columns: 1fr;  /* 移动端：单列 */
  gap: 16px;
}

@media (min-width: 576px) {
  .container {
    grid-template-columns: repeat(2, 1fr);  /* 两列 */
  }
}

@media (min-width: 992px) {
  .container {
    grid-template-columns: repeat(3, 1fr);  /* 三列 */
  }
}

使用 auto-fit 自动响应

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* 无需媒体查询，自动适应 */

布局模式切换

移动端垂直 / 桌面端水平

.layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }
}

侧边栏显示 / 隐藏

.sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .sidebar {
    display: block;
    width: 250px;
  }

  .main {
    flex: 1;
  }
}

实际案例

响应式卡片布局

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 16px;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 24px;
  }
}

@media (min-width: 1280px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

要点总结

• 移动优先：从小屏写起，用 min-width 逐步增强
• 桌面优先：从大屏写起，用 max-width 逐步降级
• Grid 的 auto-fit + minmax 可减少媒体查询使用
• 常用断点：576px、768px、992px、1200px