CSS3 多媒体查询（Media Queries）是响应式设计的重要工具，它允许你为不同的设备、屏幕尺寸、分辨率等条件设置不同的样式。通过多媒体查询，网页能够根据用户的设备特性（如屏幕宽度、设备类型、分辨率等）动态地调整样式，从而提供最佳的浏览体验。

1. 基础语法

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

@media [媒体类型] and ([条件]) {
  /* 样式规则 */
}

• @media：定义多媒体查询。
• [媒体类型]：指定查询的设备类型（如 screen, print, all 等）。
• [条件]：指定查询的条件（如 max-width, min-width 等）。

示例：基础多媒体查询

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这个查询表示当屏幕宽度小于等于 600px 时，背景色会变为浅蓝色。

2. 常用的媒体特性

以下是一些常用的媒体特性，用于控制多媒体查询的条件。

• 宽度和高度：
• width：设备的宽度。
• height：设备的高度。
• min-width：设备宽度的最小值。
• max-width：设备宽度的最大值。
• min-height：设备高度的最小值。
• max-height：设备高度的最大值。

示例：根据设备宽度调整样式

/* 当屏幕宽度大于等于 768px 时 */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* 当屏幕宽度小于 768px 时 */
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

• 设备类型：
• screen：表示用于查看文档的设备（如计算机屏幕、智能手机等）。
• print：表示打印时的设备。
• all：应用于所有设备。

示例：针对打印设备调整样式

@media print {
  body {
    font-size: 12pt;
    color: black;
  }
}

• 分辨率：
• resolution：设备的屏幕分辨率，通常用来区分高清显示器和普通显示器。
• min-resolution 和 max-resolution 用于设置最小和最大分辨率。

示例：根据分辨率调整样式

/* 当屏幕分辨率大于等于 300dpi 时 */
@media screen and (min-resolution: 300dpi) {
  img {
    max-width: 100%;
  }
}

• 设备方向：
• orientation：设备的方向，通常用于平板或手机等可旋转的设备。
• portrait：竖屏。
• landscape：横屏。

示例：根据设备方向设置不同样式

/* 当设备处于竖屏时 */
@media screen and (orientation: portrait) {
  body {
    font-size: 16px;
  }
}

/* 当设备处于横屏时 */
@media screen and (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

3. 组合多个条件

你可以通过 and、not 和 only 来组合多个查询条件。

• and：连接多个条件，表示同时满足多个条件。
• not：排除某些条件。
• only：用于针对某些特定设备进行查询，通常与 media 类型一起使用。

示例：组合多个条件

/* 仅在屏幕宽度大于等于 600px 且分辨率大于等于 2dppx 时应用 */
@media screen and (min-width: 600px) and (min-resolution: 2dppx) {
  body {
    background-color: lightgreen;
  }
}

示例：排除某些条件

/* 排除屏幕宽度小于等于 600px 的设备 */
@media not all and (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}

4. 响应式设计中的应用

多媒体查询常用于响应式设计，使得网页能够在不同尺寸的屏幕上都能良好显示。

示例：响应式布局

/* 默认样式 */
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/* 当屏幕宽度大于等于 768px 时 */
@media screen and (min-width: 768px) {
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

/* 当屏幕宽度大于等于 1024px 时 */
@media screen and (min-width: 1024px) {
  .container {
    width: 70%;
  }
}

5. 视口单位与多媒体查询

结合视口单位（vw, vh, vmin, vmax）与媒体查询可以使页面更加灵活。

示例：视口单位与媒体查询结合

@media screen and (max-width: 600px) {
  .container {
    width: 90vw; /* 使用视口宽度的 90% */
  }
}

总结

CSS3 多媒体查询是响应式设计的核心工具之一。通过使用多媒体查询，可以根据不同的设备、屏幕尺寸、分辨率等条件，灵活地调整网页的样式，确保页面在各种设备上都有最佳的显示效果。掌握多媒体查询能够帮助你为各种设备提供更好的用户体验。