CSS3媒体查询

CSS3媒体查询是CSS的一个强大功能，它允许您根据设备的特定特性（如视口宽度、设备的宽度、高度、方向等）应用不同的样式规则。这对于响应式设计至关重要，因为它可以确保您的网站或网页在各种设备和屏幕尺寸上看起来都很好。

一、媒体查询基础

媒体查询基于CSS3，并使用媒体类型和特定查询来指定应用于哪些设备或视口大小。您可以在@media标签内定义这些规则。

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

在上面的例子中，背景颜色会在视口宽度至少为600px的设备上变为浅蓝色。

二、常用查询

1、视口宽度

使用width来定义视口的宽度。例如，min-width: 600px表示当视口宽度至少为600px时应用样式。

2、高度

使用height来定义视口的高度。例如，min-height: 400px表示当视口高度至少为400px时应用样式。

3、方向:

使用orientation来检查设备是否处于横屏模式。例如，orientation: landscape表示仅当设备处于横屏模式时应用样式。

4、设备宽度和高度:

使用device-width和device-height来检查设备的屏幕宽度和高度。这些属性对于桌面和移动设备都很有用。

5、分辨率

使用resolution来检查设备的分辨率。这对于高DPI（dots per inch）屏幕特别有用。

三、组合查询

您可以使用逻辑运算符（如and, not, only, or）来组合多个查询条件。例如：

@media screen and (min-width: 600px) and (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
}

在这个例子中，背景颜色会在视口宽度至少为600px且设备处于横屏模式的设备上变为浅绿色。

四、使用多个媒体查询

您可以为不同的设备和视口大小定义多个媒体查询，并使用逗号将它们分隔开。浏览器将根据设备的特性应用匹配的规则。例如：

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

@media screen and (min-width: 601px) and (max-width: 1200px) {
  body {
    background-color: peachpuff;
  }
}

在这个例子中，背景颜色会在视口宽度小于或等于600px的设备上变为粉红色，在601px至1200px的设备上变为桃色。

五、实战演练

假设您有一个网页，您希望在桌面设备上显示一个全宽的背景图像，而在移动设备上显示一个较小的背景图像。您可以使用媒体查询来实现这一点：

body {
  /* 默认样式 */
  background-image: url('small-image.jpg');
  background-size: cover;
}

@media screen and (min-width: 768px) {
  body {
    /* 仅在桌面设备上应用的样式 */
    background-image: url('large-image.jpg');
  }
}

在这个例子中，当视口宽度至少为768px时（通常用于区分桌面和移动设备），大背景图像将被加载和应用。在较小或移动设备的视口中，将使用默认的小背景图像。

本文地址：https://www.tides.cn/p_docs-css3-media