CSS 媒体查询

Begindev 编辑部 March 25, 2026

媒体查询（Media Queries）是响应式网页设计（Responsive Web Design）的基石。它允许你的网站根据访问设备的特性来调整布局和样式。

这就好比给网站赋予了“感知”能力，让它能根据屏幕大小（从智能手机到台式电脑）自动调整外观，从而确保一致且友好的用户体验。

如果没有媒体查询，网站在移动设备上看起来会太小、太拥挤，或者在大屏幕上显得太大、被拉伸。媒体查询提供了根据用户特定的浏览环境来定制内容展示的机制。

1. 理解媒体查询

媒体查询是一种 CSS 技术，它使用 @media 规则，根据查看网页的设备特性来应用样式。

这些特性通常包括：

屏幕尺寸（宽度和高度）
设备方向（横屏或竖屏）
分辨率
输入方式（触摸屏或鼠标）

1.1 基本语法

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

@media (media-feature) {
  /* 当 media-feature（媒体特性）为真时应用的 CSS 规则 */
}

@media: 这个关键字告诉浏览器你正在定义一个媒体查询。
(media-feature): 指定必须满足的条件。只有满足此条件，大括号内的样式才会生效。
{ /* CSS rules */ }: 这是一个包含 CSS 规则的代码块。当指定的媒体特性为真时，这些规则将被应用。

1.2 媒体类型（可选）

虽然现在用得比较少，但媒体查询也可以针对特定的媒体类型（Media Types），例如屏幕、打印或语音。

screen: 适用于电脑屏幕、平板电脑和智能手机（最常用）。
print: 适用于页面被打印时。
speech: 适用于屏幕阅读器。

如果没有指定媒体类型，默认为 all，意味着适用于所有类型。

示例：

@media screen and (max-width: 600px) {
  /* 适用于小于 600px 的屏幕的样式 */
}

@media print {
  /* 打印时的样式 */
}

1.3 媒体特性 (Media Features)

媒体特性是你想要针对的设备具体特征。以下是一些最常用的特性：

width: 视口（浏览器窗口的可视区域）的宽度。
height: 视口的高度。
max-width: 视口的最大宽度（“小于等于”这个宽度）。
min-width: 视口的最小宽度（“大于等于”这个宽度）。
max-height: 视口的最大高度。
min-height: 视口的最小高度。
orientation: 设备的方向（portrait 竖屏或 landscape 横屏）。
aspect-ratio: 视口的宽高比（宽度 / 高度）。
resolution: 设备屏幕的分辨率。
pointer: 评估是否有指点设备（如鼠标、触摸屏）及其精准度。值可以是 none、coarse（粗糙，如手指）或 fine（精准，如鼠标）。
hover: 判断设备是否支持悬停。值可以是 none 或 hover。

1.4 逻辑操作符

你可以使用逻辑操作符组合多个媒体特性：

and: 要求所有指定的媒体特性都必须为真。
or: 要求至少有一个指定的媒体特性为真（用逗号分隔）。
not: 对整个媒体查询取反。
only: 用于向旧版本浏览器隐藏样式。

示例：

@media (min-width: 768px) and (max-width: 992px) {
  /* 适用于平板电脑的样式（宽度在 768px 到 992px 之间） */
}

@media (orientation: portrait), (max-width: 480px) {
  /* 适用于竖屏模式 或者 小屏幕的样式 */
}

@media not print {
  /* 适用于除打印以外的所有媒体的样式 */
}

2. 媒体查询实战案例

2.1 示例 1：根据屏幕大小调整网站布局。

假设你有一个导航菜单，希望它在大屏幕上水平显示，在小屏幕上垂直显示。

HTML:

<nav>
  <ul>
    <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>

CSS：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 使用 flexbox 进行水平布局 */
}

nav li {
  margin-right: 20px;
}

/* 针对小于 768px 屏幕的媒体查询 */
@media (max-width: 767px) {
  nav ul {
    flex-direction: column; /* 垂直堆叠项目 */
  }
  nav li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

在这个例子中，导航菜单默认使用 Flexbox 水平显示。但是，当屏幕宽度小于 768 像素时，媒体查询生效，flex-direction 属性变为 column，导致菜单项垂直堆叠。

2.2 示例 2：调整字体大小

另一个常见的用途是根据屏幕大小调整字体。这可以提高小屏幕上的可读性。

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

/* 针对小于 480px 屏幕的媒体查询 */
@media (max-width: 479px) {
  body {
    font-size: 14px; /* 小屏幕使用较小字体 */
  }
}

/* 针对大于 1200px 屏幕的媒体查询 */
@media (min-width: 1200px) {
  body {
    font-size: 18px; /* 大屏幕使用较大字体 */
  }
}

2.3 示例 3：隐藏或显示元素

媒体查询也可以用来根据屏幕大小隐藏或显示元素。这对于在小屏幕上移除不必要的内容，或在大屏幕上显示额外信息非常有用。

.desktop-only {
  display: block; /* 默认显示 */
}

.mobile-only {
  display: none; /* 默认隐藏 */
}

/* 针对小于 768px 屏幕的媒体查询 */
@media (max-width: 767px) {
  .desktop-only {
    display: none; /* 小屏幕上隐藏 */
  }
  .mobile-only {
    display: block; /* 小屏幕上显示 */
  }
}

在这个例子中，.desktop-only 元素默认显示，而 .mobile-only 元素默认隐藏。当屏幕宽度小于 768 像素时，情况反转：.desktop-only 隐藏，.mobile-only 显示。

3. 组合媒体特性

你可以组合多个特性来创建更精确的查询。例如，针对即处于竖屏模式又最大宽度为 480 像素的设备：

@media (orientation: portrait) and (max-width: 480px) {
  /* 适用于竖屏且小屏幕设备的样式 */
}

4. 断点 (Breakpoints)

断点是你希望网站布局发生改变的特定屏幕宽度点。常见的断点包括：

小屏幕 (手机): 480px 及以下
中等屏幕 (平板): 481px 到 768px
大屏幕 (桌面): 769px 到 1200px
超大屏幕 (大桌面): 1201px 及以上

这些只是参考指南。你应该根据你的具体内容来选择断点，而不是死记硬背设备的尺寸。最好的做法是：观察你的设计在哪个宽度开始“崩坏”或变得难看，就在那里设置一个断点。

4.1 案例：使用断点

/* 默认样式 */
body {
  font-size: 16px;
}
.container {
  width: 90%;
  margin: 0 auto;
}

/* 小屏幕 */
@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
    padding: 10px;
  }
}

/* 中等屏幕 */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    font-size: 15px;
  }
  .container {
    width: 80%;
  }
}

/* 大屏幕 */
@media (min-width: 769px) and (max-width: 1200px) {
  body {
    font-size: 17px;
  }
  .container {
    width: 70%;
  }
}

/* 超大屏幕 */
@media (min-width: 1201px) {
  body {
    font-size: 18px;
  }
  .container {
    width: 60%;
  }
}

5. 媒体查询最佳实践

移动优先 (Mobile-First): 先为最小的屏幕设计样式，然后使用媒体查询为更大的屏幕添加样式。这确保了网站在移动设备上总是可用的，并且不会为小屏幕加载不必要的样式。
使用相对单位: 字体大小和元素尺寸尽量使用相对单位（如百分比 %、em、rem）。这让网站更容易缩放。
在多种设备上测试: 在各种设备和屏幕尺寸上测试你的网站，确保它在所有设备上都美观且功能正常。使用浏览器的开发者工具来模拟不同的屏幕。
保持代码整洁: 将媒体查询集中在 CSS 文件中，或者按屏幕尺寸分文件管理。这会让你的 CSS 更易读、易维护。
避免过度复杂: 保持媒体查询尽可能简单。过于复杂的查询难以理解和调试。
考虑性能: 注意你使用的媒体查询数量以及其中的代码量。过多的查询或代码可能会拖慢网站速度。