在当今这个设备多样化的时代，从手机、平板到桌面显示器，用户的屏幕尺寸和分辨率千差万别。为了提供良好的用户体验，我们需要让网页能够根据设备特性自动调整布局和样式，而这正是 CSS 媒体查询（Media Queries） 的用武之地。它是实现响应式网页设计（Responsive Web Design, RWD）的核心技术之一。

一、什么是媒体查询？

媒体查询（Media Query） 是 CSS3 引入的一项特性，允许开发者基于目标设备的“媒体特性”（如宽度、高度、分辨率、方向等）有条件地应用不同的 CSS 样式。

换句话说，它就像一组“if 判断语句”，能让网页在不同设备上展现最合适的界面。

二、媒体查询的基本语法

1
2
3
@media [媒体类型] and ([媒体特性]) {
  /* 条件满足时应用的 CSS */
}
  • 媒体类型：常见的有 all（默认）、screen（屏幕）、print（打印）等。
  • 媒体特性：例如 width、max-width、orientation、resolution 等。

示例：

1
2
3
4
5
@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

含义：当屏幕宽度小于等于 768px 时，背景颜色变成浅蓝色。

三、CSS 媒体查询特性汇总表（Media Features）

以下是媒体查询支持的完整特性列表（部分支持单位及常用值）：

特性名 描述 常用值 / 单位
width / height 视口的宽度或高度 px, em
min-width / max-width 最小/最大视口宽度 768px、1024px
min-height / max-height 最小/最大视口高度 500px 等
aspect-ratio 视口宽高比 16/9、4/3
min-aspect-ratio / max-aspect-ratio 限定宽高比范围
orientation 屏幕方向 portrait、landscape
resolution 屏幕分辨率 96dpi、2dppx、300dpi
min-resolution / max-resolution 限制分辨率范围
color 可用颜色位数 8、24（一般不常用）
color-index 可用颜色索引数量（过时）
monochrome 单色显示位数（主要用于打印设备）
scan 电视设备的扫描方式（极少使用） progressive、interlace
grid 是否基于栅格设备（打印/盲文终端） 0（否）、1（是）
update 设备刷新能力（响应频率） none、slow、fast
overflow-block 纵向溢出是否允许滚动 none、scroll、paged
overflow-inline 横向是否允许滚动或分页 同上
pointer 是否有指针输入设备 none、coarse、fine
hover 是否支持悬停 none、hover
prefers-color-scheme 用户偏好颜色主题 dark、light
prefers-reduced-motion 用户是否偏好减少动画 reduce、no-preference

💬并非所有特性在所有设备上都被支持，请使用 DevTools 检查生效情况。

四、逻辑运算符

  • and：多个条件同时满足时生效
  • ,：类似于 or，任一条件满足即生效
  • not：逻辑非，条件不满足时生效

示例：

1
2
3
4
5
@media screen and (min-width: 768px) and (orientation: landscape) { }

@media (max-width: 600px), (orientation: portrait) { }

@media not screen and (max-width: 768px) { }

五、响应式开发策略：Mobile First vs Desktop First

Mobile First（推荐）：先写手机端样式，使用 min-width 增强样式。

1
2
3
4
5
6
7
8
9
10
11
/* 默认手机样式 */
.container {
  font-size: 14px;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .container {
    font-size: 16px;
  }
}

这种写法清晰且易于维护，适合现代 Web 开发。

六、实战案例：响应式导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    .nav {
      display: flex;
      justify-content: space-between;
      background: #333;
      padding: 10px;
      color: white;
    }

    .nav .menu {
      display: flex;
      gap: 20px;
    }

    .nav .hamburger {
      display: none;
      cursor: pointer;
    }

    @media (max-width: 600px) {
      .nav .menu {
        display: none;
      }

      .nav .hamburger {
        display: block;
      }
    }
  </style>
</head>
<body>
  <div class="nav">
    <div class="logo">MySite</div>
    <div class="menu">
      <div>Home</div>
      <div>About</div>
      <div>Contact</div>
    </div>
    <div class="hamburger">☰</div>
  </div>
</body>
</html>

👉 拖动浏览器窗口宽度，观察菜单变化。这种设计常用于响应式网页导航栏。

七、进阶技巧

1. 适配暗色模式（Dark Mode）

1
2
3
4
5
6
@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: white;
  }
}

2. Retina 屏优化

1
2
3
4
5
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url("logo@2x.png");
  }
}

3. 使用 CSS 变量配合媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
:root {
  --font-size: 14px;
}

@media (min-width: 768px) {
  :root {
    --font-size: 16px;
  }
}

p {
  font-size: var(--font-size);
}

八、常见断点建议（断点 = 适配分界线）

设备 建议断点区间
手机 max-width: 600px
平板 601px ~ 1024px
小桌面 1025px ~ 1440px
大屏桌面 min-width: 1441px

九、常见错误排查建议

  1. 忘记加 viewport 元标签导致移动端样式无效：

    1
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  2. 写了媒体查询却没命中选择器（选择器优先级或拼写错误）。

  3. 媒体查询覆盖不生效，需注意后写样式优先。

  4. 在组件化开发中（如 Vue/React），注意媒体查询是否作用于局部作用域或模块 CSS。