CSS中的媒体查询是一种用于根据不同设备的特性（如屏幕尺寸、分辨率、颜色能力等）应用不同样式规则的技术。通过使用媒体查询，开发者可以创建响应式网站，这意味着网站可以自动适应不同设备的显示需求，从而提供更好的用户体验。

媒体查询基本上由两个部分组成：

媒体类型：定义了样式应用的设备类型，例如 screen（屏幕）、print（打印机）等。

查询表达式：用于检查设备特性的逻辑表达式，如屏幕宽度、高度、分辨率等。

基本语法

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

@media 媒体类型 and (条件表达式) {
    /* CSS规则 */
}

例如，以下媒体查询将仅在屏幕宽度小于或等于600像素的设备上应用样式：

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

使用示例

适应屏幕尺寸：

为了使网站在不同尺寸的设备上看起来都合适，可以使用多个断点来定义不同的样式。例如：

/* 大屏幕设备 */
@media screen and (min-width: 1200px) {
    body {
        font-size: 16px;
    }
}

/* 中等屏幕设备 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    body {
        font-size: 14px;
    }
}

/* 小屏幕设备 */
@media screen and (max-width: 767px) {
    body {
        font-size: 12px;
    }
}

这样的布局能够保证在大屏幕上阅读时字体不会显得太小，而在小屏幕上字体也不会过大，影响阅读。

适应打印：

当用户打印网页时，可能不需要某些元素（如导航条或广告）。媒体查询可以用来隐藏这些元素：

@media print {
    nav, #advertisement {
        display: none;
    }
    body {
        font-size: 12pt;
    }
}

通过使用CSS媒体查询，开发者可以提供更流畅的浏览体验，无论访问者是通过手机、平板、笔记本还是台式机访问网站。