CSS 媒体查询（Media Queries）是 CSS3 中的一个重要特性，它允许开发者根据不同的设备特性来编写不同的样式。以下是一些关于 CSS 媒体查询的基础知识和使用技巧。

媒体查询简介

媒体查询可以让你根据设备的屏幕尺寸、分辨率、颜色深度等特性来应用不同的 CSS 样式。这使得网页能够更好地适应不同的设备，提供更好的用户体验。

媒体查询语法

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

@media media-type and (expressions) {
  CSS 样式规则;
}

其中，media-type 表示媒体类型，如 screen、print 等；(expressions) 表示媒体查询的条件，如 width: 600px。

常用媒体查询示例

  1. 屏幕宽度小于 600px 的设备
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
  1. 屏幕宽度在 600px 到 1200px 之间的设备
@media screen and (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightgreen;
  }
}
  1. 屏幕宽度大于 1200px 的设备
@media screen and (min-width: 1200px) {
  body {
    background-color: lightcoral;
  }
}

图片示例

下面是一个媒体查询的图片示例：

CSS 媒体查询示例

扩展阅读

想要了解更多关于 CSS 媒体查询的知识，可以阅读以下文章：