媒体查询（Media Queries）是 CSS3 中的一项功能，它允许开发者根据不同的设备特征（如屏幕尺寸、分辨率、设备类型等）来应用不同的样式规则。以下是一些关于媒体查询的基本知识：

媒体查询的基本语法

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

@media media-type and (expression) {
  /* CSS 样式规则 */
}

其中，media-type 可以是 all、screen、print 等值，表示样式适用于所有设备、屏幕设备或打印设备。expression 是一个条件表达式，用于指定何时应用样式规则。

常用的媒体特性

以下是一些常用的媒体特性，可以用于编写媒体查询：

  • width 和 height：表示设备的宽度和高度。
  • min-width 和 min-height：表示设备的最小宽度和高度。
  • max-width 和 max-height：表示设备的最大宽度和高度。
  • orientation：表示设备的方向，可以是 portrait（纵向）或 landscape（横向）。

示例

以下是一个示例，演示如何使用媒体查询来为不同屏幕尺寸的设备设置不同的样式：

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

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

在上面的示例中，当屏幕宽度大于或等于 600px 时，背景颜色为浅蓝色；当屏幕宽度大于或等于 800px 时，背景颜色为浅绿色。

扩展阅读

更多关于 CSS 媒体查询的信息，请参考以下链接：


```html
<center><img src="https://cloud-image.ullrai.com/q/css_media_queries/" alt="CSS 媒体查询"/></center>