CSS3媒体查询简介与使用方法

媒体查询是CSS3的一个功能，可以根据设备的不同特性（如屏幕尺寸、分辨率等）来应用不同的样式规则。

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

@media [media_type] [and | not | only] (media_feature) {
    /* CSS 样式 */
}

• media_type 可以是 all, print, screen 或其他媒体类型。
• media_feature 是用于检查设备特性的条件，例如 max-width, min-height 等。

下面是一个使用媒体查询的例子，它针对不同的屏幕宽度应用不同的背景颜色：

/* 默认样式 */
body {
    background-color: lightblue;
}
 
/* 屏幕宽度至少为 600px */
@media screen and (min-width: 600px) {
    body {
        background-color: pink;
    }
}
 
/* 屏幕宽度至少为 900px */
@media screen and (min-width: 900px) {
    body {
        background-color: orange;
    }
}
 
/* 屏幕宽度至少为 1200px */
@media screen and (min-width: 1200px) {
    body {
        background-color: lightgreen;
    }
}

在上述代码中，根据屏幕宽度的不同，body 的背景色会改变。当屏幕宽度小于600px时，背景色为lightblue；当宽度至少为600px且不小于900px时，背景色为pink；当宽度至少为900px且不小于1200px时，背景色为orange；当宽度至少为1200px时，背景色为lightgreen。