简单来说，它允许你根据不同的设备或特定条件（如屏幕宽度、高度、设备方向、分辨率等）来应用不同的 CSS 样式规则。

---

1. 为什么要用媒体查询？

在响应式设计出现之前，我们通常需要为电脑、手机、平板分别制作不同的网站。媒体查询的出现改变了这一切，使得一个网站能够自动适应不同尺寸的设备，从而提供更好的用户体验。

• 提升用户体验：在手机上显示单栏布局，在平板上显示两栏，在电脑上显示三栏。
• 提高开发效率：维护一套代码，比维护多个版本的网站要容易得多。
• 适应未来设备：无论未来出现什么新尺寸的设备，基于媒体查询的网站都能更好地适应。

---

2. 媒体查询的语法结构

媒体查询的基本语法由 @media 规则组成，后跟一个或多个媒体类型和媒体特性（表达式）。

基本结构：

@media media-type and (media-feature-rule) {
  /* 满足条件时应用的 CSS 规则 */
}

• @media： 声明这是一个媒体查询规则。

• media-type (媒体类型)： 指定设备类型。常见的有：

  • all： 所有设备（默认）。
  • screen： 屏幕设备（电脑、平板、手机等）。
  • print： 打印预览模式。
  • speech： 屏幕阅读器等发声设备。
  • （现在最常用的就是 screen，很多时候甚至会省略，因为默认就是 all，而 all 已经包含 screen）

• and： 逻辑操作符，用于将媒体类型和媒体特性以及多个媒体特性连接起来（相当于“且”）。

• (media-feature-rule) (媒体特性/表达式)： 定义具体的条件，必须用括号 () 包裹。最常见的是：

  • (min-width: 768px)： 视口宽度大于等于 768px 时。
  • (max-width: 767px)： 视口宽度小于等于 767px 时。
  • (orientation: landscape)： 设备横屏时。
  • (orientation: portrait)： 设备竖屏时。
  • (prefers-color-scheme: dark)： 系统启用深色模式时。

---

3. 常见的媒体特性（断点设置）

设置样式改变的“临界点”称为断点。虽然设备尺寸千变万化，但业界有一些常见的断点参考：

设备类型	常见断点（min-width）	说明
手机（小屏）	max-width: 575px	通常作为移动端的专属样式
手机（大屏）	min-width: 576px
平板（竖屏）	min-width: 768px
平板（横屏）/小屏笔记本	min-width: 992px
台式电脑/笔记本	min-width: 1200px
大尺寸电脑	min-width: 1400px

重要提示：这些断点并非一成不变。最佳实践是根据你自身网站的内容布局来设置断点。当某个尺寸下布局变得难看或难以使用时，那就是你需要设置一个断点的地方。

---

4. 逻辑操作符

你可以使用 and, , (逗号，相当于“或”), not 来构建更复杂的查询。

• and (与)： 连接多个条件，所有条件都必须满足。

  /* 横屏且宽度至少为 700px */
  @media (orientation: landscape) and (min-width: 700px) {
    body { ... }
  }

• , (或)： 满足逗号分隔的任意一个条件即可。

  /* 最大宽度为 600px 或者是竖屏 */
  @media (max-width: 600px), (orientation: portrait) {
    body { ... }
  }

• not (非)： 对整个查询取反。

  /* 非横屏的设备 */
  @media not (orientation: landscape) {
    body { ... }
  }