什么是 CSS 媒体查询，以及如何使用它？

CSS媒体查询是一种在CSS中使用的技术，它允许Web开发人员为不同的媒体类型和条件创建响应式网页设计。简单来说，媒体查询可以让我们根据用户设备的特定特征（如屏幕宽度、分辨率、设备类型等）来应用不同的CSS样式。

使用方法

媒体查询主要通过 @media 规则来使用，可以在CSS中直接定义，也可以在标签中使用媒体属性来链接外部样式表。基本语法如下：

css
@media (条件) {
    /* 当条件满足时应用的CSS规则 */
}

示例

假设我们想要设计一个网页，使其在小屏设备（例如手机）和大屏设备（例如桌面电脑）上显示不同的布局。

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

/* 针对屏幕宽度小于600px的设备 */
@media (max-width: 600px) {
    body {
        background-color: lightgreen;
    }
}

/* 针对屏幕宽度在600px至1200px之间的设备 */
@media (min-width: 600px) and (max-width: 1200px) {
    body {
        background-color: lightyellow;
    }
}

/* 针对屏幕宽度大于1200px的设备 */
@media (min-width: 1200px) {
    body {
        background-color: lightcoral;
    }
}

在上述例子中，根据不同的屏幕宽度，背景颜色会发生变化。这样一来，无论用户是在手机、平板，还是桌面电脑上浏览网页，都能提供适宜的视觉体验。

应用场景

媒体查询广泛应用于响应式网页设计中，帮助开发者实现多种设备兼容，改善用户的浏览体验。除了根据屏幕宽度调整样式之外，媒体查询还可以根据其他特性来定制样式，例如设备的方向（横屏或竖屏）、分辨率等。

通过合理使用CSS媒体查询，可以大大提升网站的灵活性和用户满意度。