css的media媒体查询

媒体查询（Media Queries）是CSS3中的一项功能，用于根据设备的特性和特定条件来应用不同的CSS样式。通过媒体查询，我们可以根据设备的屏幕大小、分辨率、颜色能力等特性来响应式地适配不同的设备。

媒体查询通常使用在CSS的@media规则中。下面是一个示例：

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

@media (min-width: 768px) and (max-width: 1024px) {
  /* 当屏幕宽度在768像素和1024像素之间时应用的样式 */
  body {
    background-color: lightgreen;
  }
}

@media (min-width: 1024px) {
  /* 当屏幕宽度大于等于1024像素时应用的样式 */
  body {
    background-color: lightpink;
  }
}

上述代码中，我们使用@media规则和媒体查询来定义了不同屏幕宽度下的背景颜色。根据屏幕宽度的不同，页面背景颜色会有所变化。

在媒体查询中，我们可以使用各种条件来指定不同的设备特性，如屏幕宽度、高度、分辨率、设备方向等等。通过这些条件，我们可以为不同的设备提供最佳的显示效果。