响应式设计实战：媒体查询与移动优先

在现代网页开发中，让同一个网站完美适配手机、平板和桌面设备不再是“锦上添花”，而是基本要求。本教程从实战出发，带你掌握响应式设计的核心武器——媒体查询与移动优先策略。

理解移动优先与响应式设计的核心思想

什么是移动优先？

移动优先（Mobile First）是一种从最小屏幕开始编写 CSS，再逐步为大屏添加复杂样式的设计策略。它的优势在于：

• 保障基础内容在移动端的加载速度和可用性
• 减少不必要的代码覆盖，让 CSS 结构更清晰
• 符合移动端流量占比越来越高的现实

反例：从桌面端设计开始，然后通过 max-width 不断缩小元素，容易导致移动端内容臃肿、代码冗余。 正例：先写出在手机上好用的单列布局，再通过 min-width 媒体查询添加多列、侧边栏等增强样式。

响应式设计的三要素

1. 流体网格（百分比宽度、vw、fr 等相对单位）
2. 灵活的图片与媒体（max-width: 100% 等）
3. CSS 媒体查询（@media），按需调整布局

其中媒体查询是实现断点切换的关键，也是本教程的实战重点。

媒体查询基础：语法与断点设置

媒体查询允许我们根据设备特性（屏幕宽度、分辨率、横竖屏等）应用不同的 CSS 规则。

基本语法

@media <媒体类型> and (媒体特性) {
  /* 对应的 CSS 规则 */
}

常用的媒体类型是 screen（屏幕，也可以省略，默认为 all），最常用的特性是 min-width 和 max-width。

选用 min-width 还是 max-width？

• 移动优先推荐使用 min-width：从小往大写，符合“渐进增强”。
• max-width 适合从桌面往小写（桌面优先），但会增加覆盖复杂度。

示例对比：

/* 移动优先写法 (推荐) */
.box { width: 100%; }             /* 手机下占满 */
@media (min-width: 768px) { .box { width: 50%; } }  /* 平板起变为两列 */

/* 桌面优先写法 */
.box { width: 50%; }
@media (max-width: 767px) { .box { width: 100%; } }

常见断点选择

不要照搬设备尺寸，而是根据内容“自然折断”的点来设置断点。以下是实践中常用的参考断点：

在代码中可用变量统一管理（配合 Sass/Less 更便捷）：

/* CSS 自定义属性无法直接用于媒体查询，通常使用预处理器变量或直接写数值 */
/* 示例：直接使用宽度值 */
@media (min-width: 768px) { … }
@media (min-width: 992px) { … }
@media (min-width: 1200px) { … }

移动优先实战：从手机到桌面的完整布局

我们以搭建一个“文章卡片列表”为例，它将：

• 手机端：卡片垂直堆叠，图片全宽
• 平板端（≥768px）：两列网格
• 桌面端（≥1200px）：三列网格，添加间距与阴影

HTML 结构

<section class="card-list">
  <article class="card">
    <img src="image.jpg" alt="文章配图" class="card-img">
    <div class="card-body">
      <h2 class="card-title">响应式设计入门</h2>
      <p class="card-text">如何让一个页面适配所有尺寸…</p>
    </div>
  </article>
  <!-- 更多 .card -->
</section>

移动端基础样式（无媒体查询）

/* 基础重置与全局样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }

.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: auto;
  display: block;
}

.card-body {
  padding: 12px;
}

.card-title {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.card-text {
  font-size: 0.95rem;
  color: #555;
}

此时，所有尺寸的设备看到的都是单列卡片。

平板端（≥768px）：两列网格

使用 min-width: 768px 媒体查询，将卡片容器改为两列，并调整内部布局（图片可以放左侧）。

@media (min-width: 768px) {
  .card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 24px;
  }

  /* 可将单张卡片调整为水平排列 */
  .card {
    flex-direction: row;
  }

  .card-img {
    width: 40%;
    object-fit: cover; /* 保持图片比例 */
  }

  .card-body {
    flex: 1;
  }
}

桌面端（≥1200px）：三列布局，优化细节

更大的屏幕需要更多列并增加视觉留白。

@media (min-width: 1200px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto; /* 居中容器 */
  }

  .card {
    flex-direction: column; /* 恢复为垂直卡片 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s;
  }

  .card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }

  .card-img {
    width: 100%;
  }
}

进阶媒体查询技巧

1. 使用 em 或 rem 作为断点单位

推荐在媒体查询中使用 em，因为它基于根字体大小，在用户缩放时也能保持一致表现。

/* 不推荐 px，推荐 em */
@media (min-width: 48em) { … }   /* 768 / 16 = 48em */
@media (min-width: 75em) { … }  /* 1200 / 16 = 75em */

2. 结合 prefers-reduced-motion

为偏好减少动画的用户关闭过渡效果：

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

3. 组合多个条件

同时检测宽度和横竖屏，例如针对横屏平板：

@media (min-width: 768px) and (orientation: landscape) {
  .card-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

4. 媒体查询的范围语法（Level 4）

现代浏览器支持更直观的范围写法，可以替代 min-/max-：

@media (width >= 768px) {
  /* 等同于 min-width: 768px */
}

@media (576px <= width <= 991px) {
  /* 仅在该范围内生效 */
}

注意：生产环境请确认目标浏览器是否支持，或使用 PostCSS 插件转译。

实战中的坑与优化建议

不要把断点设成与某个设备硬绑定

比如写死 768px 仅仅因为 iPad 宽度是 768。应该在内容被挤压或空白过多时，自定义断点。

隐藏与显示策略

不要完全依赖 display: none 来隐藏移动端内容，某些重要功能在移动端也应提供（如导航菜单转为汉堡菜单）。配合 visibility 或绝对定位等手段。

测试真实设备

Chrome DevTools 的设备模式是基础，但一定要在真实手机/平板上验证，尤其注意：

• 点击区域的尺寸（至少 48x48px）
• 横屏下的表现
• 输入框缩放问题

图片适配

始终使用 max-width: 100% 和 height: auto。可配合 <picture> 标签或 srcset 提供不同分辨率的图片，但要先保证基础样式安全。

实践练习：做一个移动优先的页面导航

需求：

• 移动端：logo 左对齐，菜单变为汉堡图标，点击后垂直展开链接
• 平板以上：横向显示所有菜单项，隐藏汉堡图标

你可以尝试自己完成，参考结构：

<header class="header">
  <a href="#" class="logo">Logo</a>
  <nav class="nav" id="mainNav">
    <button class="nav-toggle" id="toggleBtn">☰</button>
    <ul class="nav-list">
      <li><a href="#">首页</a></li>
      <li><a href="#">文章</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </nav>
</header>

基础 CSS（移动端）要把 .nav-list 默认隐藏，点击 .nav-toggle 后通过 JS 添加类名展开。然后在 @media (min-width: 768px) 中让 .nav-list 显示为 flex 横排，隐藏切换按钮。

完整的响应式导航实现涉及一定量的 JS，但通过媒体查询控制块的显示与隐藏是核心思路。

总结

• 移动优先 = 基础样式给手机 + min-width 媒体查询增强大屏体验
• 断点应基于内容，而不是特定设备
• 媒体查询可以叠加多种特性，单位推荐 em
• 实战中要结合 flexbox/grid、流体单位与媒体查询共同构建弹性页面

响应式设计远不止写几行 @media，它是一种思考内容布局的全局策略。从现在开始，每个项目都尝试从手机尺寸开始编写样式，你会发现代码反而更简洁、可维护性更高。