响应式 Web 设计 – 媒体查询（手把手讲解）

响应式 Web 设计 – 媒体查询：让网页“聪明”起来

你有没有遇到过这样的情况？在手机上看网页，文字挤成一团，按钮小得点不到，图片拉伸变形，页面乱成一锅粥？这其实不是你的设备有问题，而是网页“不够聪明”——它没有根据屏幕大小自动调整布局。

而解决这个问题的核心技术，就是“响应式 Web 设计 – 媒体查询”。它就像给网页装上一双“眼睛”和“大脑”，让它能感知当前设备的屏幕尺寸、分辨率、方向等信息，并做出相应的视觉调整。

今天我们就来深入聊聊这个让网页“会思考”的技术，从基础概念到实战应用，一步步带你掌握它的精髓。

什么是媒体查询？它如何工作？

媒体查询（Media Queries）是 CSS3 中的一项强大功能，允许我们根据设备的特性（如屏幕宽度、高度、方向、分辨率等）来应用不同的样式规则。

你可以把它想象成一个“条件判断”：

如果屏幕宽度小于 768 像素，就使用手机模式的样式；
如果大于 768 像素，就使用桌面模式的样式。

这种“按需调整”的能力，正是现代网页能够适配各种设备的根本原因。

媒体查询的基本语法如下：

@media screen and (max-width: 768px) {
  /* 当屏幕宽度不超过 768px 时，以下样式生效 */
  body {
    font-size: 16px;
  }
  .container {
    width: 95%;
  }
}

• @media：是媒体查询的声明关键字。
• screen：表示目标设备类型，这里指屏幕显示设备。
• and：用于组合多个条件。
• (max-width: 768px)：是一个具体的媒体特性，表示最大宽度为 768 像素。

注意：媒体查询不是“开关”，而是“条件表达式”。它会在满足条件时，把里面的所有样式规则“激活”。

常见的媒体特性有哪些？

在使用媒体查询时，我们最常关注的是以下几个媒体特性。它们就像网页的“感官”：

举个生活化的例子：
就像你去餐厅吃饭，服务员会根据你带的“人数”来安排座位。

• 如果是 1 人，给小桌；
• 如果是 4 人，给大桌。

媒体查询也是这样，它根据“屏幕宽度”来决定该用哪种布局。

实战：构建一个响应式导航栏

我们来做一个实际案例：实现一个在手机上折叠、在桌面展开的导航栏。

HTML 结构

<nav class="navbar">
  <div class="nav-logo">MySite</div>
  <ul class="nav-menu">
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

基础样式（默认桌面样式）

/* 默认样式：桌面端 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem 2rem;
  color: white;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-menu a:hover {
  color: #00bfff;
}

媒体查询：手机端折叠菜单

现在我们加入媒体查询，让页面在小屏幕上自动切换为折叠菜单。

/* 当屏幕宽度小于 768px 时，启用移动端样式 */
@media screen and (max-width: 768px) {
  /* 折叠导航栏：垂直排列 */
  .navbar {
    flex-direction: column;
    padding: 1rem;
    text-align: center;
  }

  /* 菜单变为垂直排列 */
  .nav-menu {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }

  /* 为手机添加一个“汉堡菜单”按钮（可选） */
  .nav-menu::before {
    content: "☰";
    font-size: 2rem;
    cursor: pointer;
    display: block;
    margin-bottom: 1rem;
  }
}

效果：

• 在桌面浏览器中，导航栏水平排列，清晰美观；
• 在手机浏览器中，自动变成上下排列，避免拥挤，用户体验更佳。

这个例子完美体现了“响应式 Web 设计 – 媒体查询”的核心价值：同一份代码，适配多种设备。

媒体查询的最佳实践

在实际开发中，我们常犯一些小错误。这里分享几个关键建议，帮你少走弯路。

1. 从移动优先开始（Mobile First）

不要从“桌面端”开始写样式，再往小屏幕“降级”。正确的做法是：

• 先写移动端样式（小屏幕）
• 再用 min-width 媒体查询逐步扩展到大屏

/* 移动端基础样式 */
.container {
  width: 100%;
  padding: 1rem;
}

/* 当屏幕宽度 ≥ 768px 时，应用桌面样式 */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
    padding: 2rem;
  }
}

✅ 优势：代码更简洁，性能更好，符合现代开发趋势。

2. 使用相对单位（rem、em、%）

避免使用固定像素（px），改用 rem 或 %，让布局更有弹性。

body {
  font-size: 16px; /* 基准字体大小 */
}

h1 {
  font-size: 2rem; /* 相对于根元素字体大小 */
}

.container {
  width: 90%; /* 百分比，自适应 */
}

3. 不要过度依赖媒体查询

媒体查询不是万能药。过度使用会导致 CSS 文件臃肿、维护困难。建议：

• 优先使用 Flexbox 或 Grid 布局，它们本身就具备响应能力；
• 媒体查询用于“微调”或“关键断点”；
• 通常只需要设置 2~4 个断点即可，如：480px、768px、1024px、1200px。

常见断点推荐（可直接复制使用）

在项目中，你可以直接使用以下断点作为参考：

/* 超小屏（手机竖屏） */
@media screen and (max-width: 480px) {
  /* 手机专属样式 */
}

/* 小屏（手机横屏 / 平板竖屏） */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* 小屏样式 */
}

/* 中屏（平板横屏） */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 平板样式 */
}

/* 大屏（桌面） */
@media screen and (min-width: 1025px) {
  /* 桌面端样式 */
}

这些断点覆盖了主流设备，适合大多数项目。

响应式设计的未来：不只是屏幕尺寸

虽然媒体查询主要针对屏幕尺寸，但它的能力远不止于此。

例如，你可以根据用户设备的打印状态调整样式：

@media print {
  /* 打印时隐藏导航栏、按钮等非必要元素 */
  .navbar, .btn {
    display: none;
  }

  /* 打印时使用更清晰的字体和颜色 */
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }
}

又比如，根据设备是否支持触摸（hover 特性）来调整交互：

@media (hover: hover) {
  /* 支持悬停的设备（如桌面） */
  .menu-item:hover {
    background-color: #f0f0f0;
  }
}

@media (hover: none) {
  /* 不支持悬停的设备（如手机） */
  .menu-item:active {
    background-color: #e0e0e0;
  }
}

这些进阶用法，让你的网页真正“智能”起来。

总结：让网页“懂你”才是好设计

“响应式 Web 设计 – 媒体查询”不是一项炫技的技术，而是一种以人为本的设计思维。

它让我们从“我做了一个网页”转向“我的网页在各种设备上都能用得好”。

无论你是初学者还是中级开发者，掌握媒体查询，都能让你的项目更专业、更实用。

记住三点：

1. 从移动优先开始写样式；
2. 使用 min-width 逐步扩展，而不是 max-width 倒推；
3. 媒体查询是“工具”，不是“目标”，别让它主导你的布局。

最后，别忘了：一个好网页，不只是“能看”，更是“好用”。而媒体查询，正是实现“好用”的第一步。