CSS3中的媒体查询如何使用

在CSS3中，媒体查询（Media Queries）是一种强大的工具，它允许你根据设备的特性（如屏幕尺寸、分辨率、设备类型等）来应用不同的CSS样式。这使得你可以创建响应式设计，即网页能够自动适应不同设备的屏幕尺寸和分辨率。

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

@media not|only mediatype and (expressions) {
  CSS-Code;
}

• @media 关键字表示媒体查询的开始。
• not 和 only 是可选的，用于指定是否排除某个媒体类型。not 表示排除，而 only 表示仅当指定的条件为真时才应用样式。
• mediatype 是可选的，用于指定媒体类型，如 screen（屏幕）、print（打印）等。如果不指定媒体类型，默认为 all。
• (expressions) 是一个或多个条件表达式，用于指定媒体查询的条件。

以下是一些常见的媒体查询示例：

1. 根据屏幕宽度应用不同的样式：

/* 当屏幕宽度小于等于600px时应用 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 当屏幕宽度大于600px且小于等于900px时应用 */
@media screen and (min-width: 601px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
  }
}

2. 根据设备像素比（DPR）应用不同的样式：

/* 当设备像素比大于等于2时应用 */
@media screen and (min-resolution: 2dppx) {
  img {
    content: url('high-res-image.png');
  }
}

3. 根据设备类型应用不同的样式：

/* 当设备为打印机时应用 */
@media print {
  body {
    color: black;
  }
}

你可以将多个媒体查询组合在一起，以实现更复杂的响应式设计。例如：

/* 当屏幕宽度小于等于600px时应用 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 当屏幕宽度大于600px且小于等于900px时应用 */
@media screen and (min-width: 601px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
  }
}

/* 当屏幕宽度大于900px时应用 */
@media screen and (min-width: 901px) {
  body {
    background-color: lightyellow;
  }
}

这样，当设备的屏幕宽度发生变化时，网页的背景颜色会根据媒体查询的条件自动调整。