CSS3媒体查询怎么写

CSS3媒体查询（Media Queries）允许你根据设备的特性（如屏幕尺寸、分辨率、设备类型等）来应用不同的CSS样式。这使得你可以创建响应式设计的网页，能够适应不同设备的显示需求。

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

@media not|only mediatype and (expressions) {
    /* CSS 规则 */
}

• @media 关键字用于指定媒体查询。
• not 是可选的，用于排除某些设备。
• only 也是可选的，用于确保只有当指定的条件满足时，样式才会被应用。
• mediatype 是媒体类型，如 screen（屏幕）、print（打印）等。
• (expressions) 是一个或多个表达式，用于定义媒体查询的条件。

以下是一些常见的媒体查询示例：

根据屏幕宽度设置样式

/* 当屏幕宽度小于或等于600px时应用 */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* 当屏幕宽度大于600px且小于或等于900px时应用 */
@media screen and (min-width: 601px) and (max-width: 900px) {
    body {
        background-color: lightgreen;
    }
}

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

根据设备类型设置样式

/* 当设备是屏幕时应用 */
@media screen {
    body {
        background-color: lightblue;
    }
}

/* 当设备是打印时应用 */
@media print {
    body {
        background-color: transparent;
    }
}

结合多个条件设置样式

/* 当设备是屏幕且屏幕宽度小于或等于600px时应用 */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* 当设备是屏幕且屏幕宽度大于600px且小于或等于900px时应用 */
@media screen and (min-width: 601px) and (max-width: 900px) {
    body {
        background-color: lightgreen;
    }
}

/* 当设备是屏幕且屏幕宽度大于900px时应用 */
@media screen and (min-width: 901px) {
    body {
        background-color: lightcoral;
    }
}

通过这些示例，你可以看到媒体查询如何帮助你创建适应不同设备和屏幕尺寸的响应式网页。