CSS3媒体查询如何应用

CSS3媒体查询（Media Queries）是一种让网页根据不同设备或屏幕尺寸自动调整样式的技术。通过使用媒体查询，你可以为不同的设备和屏幕尺寸创建特定的CSS规则，从而实现响应式设计。

要应用CSS3媒体查询，请按照以下步骤操作：

1. 在HTML文件中引入CSS文件，或者直接在HTML文件中使用<style>标签编写CSS代码。

2. 在CSS代码中，使用@media关键字开始一个媒体查询。后面跟着一个媒体类型（如all、print、screen等）和可选的媒体特性表达式（如min-width、max-width、min-height、max-height等）。

3. 在媒体查询的大括号{}内，编写适用于该媒体类型的CSS规则。

下面是一个简单的示例，展示了如何使用媒体查询为不同屏幕尺寸设置背景颜色：

/* 默认样式，适用于所有设备 */
body {
  background-color: lightblue;
}

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

/* 当屏幕宽度大于等于900px时，应用以下样式 */
@media screen and (min-width: 900px) {
  body {
    background-color: lightcoral;
  }
}

在这个示例中，我们为不同屏幕尺寸设置了三种不同的背景颜色。当屏幕宽度小于等于600px时，背景颜色为浅绿色；当屏幕宽度在601px到899px之间时，背景颜色为浅蓝色；当屏幕宽度大于等于900px时，背景颜色为浅珊瑚色。

你可以根据需要添加更多的媒体查询和CSS规则，以实现更复杂的响应式设计。