媒体查询的使用

媒体查询（Media Queries）是 CSS3 的一个特性，它允许你根据设备的特性（如宽度、高度和颜色）来应用不同的 CSS 样式。这使得开发者能够创建更加灵活和响应式的网页设计。

下面是一个简单的媒体查询示例，展示了如何为不同屏幕尺寸应用不同的样式：

/* 默认样式，适用于所有屏幕尺寸 */  
body {  
  background-color: lightblue;  
}  
  
/* 当屏幕宽度小于 600px 时应用的样式 */  
@media screen and (max-width: 600px) {  
  body {  
    background-color: lightgreen;  
  }  
}  
  
/* 当屏幕宽度在 600px 和 1200px 之间时应用的样式 */  
@media screen and (min-width: 601px) and (max-width: 1200px) {  
  body {  
    background-color: lightyellow;  
  }  
}  
  
/* 当屏幕宽度大于 1200px 时应用的样式 */  
@media screen and (min-width: 1201px) {  
  body {  
    background-color: lightpink;  
  }  
}

在这个示例中，我们定义了四个不同的样式规则：

1. 默认样式规则适用于所有屏幕尺寸，将背景颜色设置为浅蓝色。
2. 当屏幕宽度小于 600px 时，背景颜色会变为浅绿色。
3. 当屏幕宽度在 600px 和 1200px 之间时，背景颜色会变为浅黄色。
4. 当屏幕宽度大于 1200px 时，背景颜色会变为浅粉色。

通过使用媒体查询，我们可以为不同尺寸的设备提供优化的样式，从而提高用户体验。