CSS中如何使用媒体查询

在CSS中，媒体查询（Media Queries）是一种强大的工具，它允许你根据设备的特性（如屏幕尺寸、分辨率、设备类型等）来应用不同的样式规则。这使得你可以创建响应式设计，确保你的网站或应用在不同设备和屏幕尺寸上都能良好地显示。

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

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

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

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

1. 根据屏幕宽度应用不同的样式

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

/* 当屏幕宽度在600px到900px之间时应用的样式 */
@media screen and (min-width: 600px) and (max-width: 899px) {
    body {
        background-color: lightgreen;
    }
}

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

2. 根据设备类型应用不同的样式

/* 当设备是打印设备时应用的样式 */
@media print {
    body {
        background-color: white;
        color: black;
    }
}

/* 当设备是屏幕设备时应用的样式 */
@media screen {
    body {
        background-color: lightgray;
        color: black;
    }
}

3. 结合多个条件应用样式

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

/* 当设备是屏幕设备且屏幕宽度在600px到900px之间时应用的样式 */
@media screen and (min-width: 600px) and (max-width: 899px) {
    body {
        background-color: lightgreen;
    }
}

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

4. 使用 not 关键字排除某些设备

/* 当设备不是打印设备时应用的样式 */
@media not print {
    body {
        background-color: lightgray;
    }
}

通过这些示例，你可以看到媒体查询是如何根据不同的条件来应用不同的CSS样式的。这使得你可以创建更加灵活和响应式的设计。