CSS 的媒体查询使得我们可以设定一套规则，使得样式仅在浏览器或设备匹配时才应用。最经典的场景是，我们可以在不同的视窗宽度下控制元素的大小，达到响应式的效果。以此适应电脑、手机、Pad 等多套设备。

媒体查询语法：

@media 媒体类型 and (媒体表达式) {
    /* CSS 样式 */
}

一个媒体查询通常由以下三部分组成：

媒体类型：告诉浏览器这段 CSS 样式应用的媒体类型，如印刷品或屏幕。
媒体表达式：一个表达式，比如屏幕最大宽度等。
CSS 样式

媒体类型

媒体类型有以下选择项：

all：所有的设备类型。
print：打印预览屏幕下。
screen：用于屏幕。
speech：语音合成器。

我们最常用的媒体类型是 all 或者 screen，一般情况下也可以不设置媒体类型。

媒体特性

以下是一个例子，在视窗宽度最多为 800px 时（不大于 800px 、小于等于 800px ），将 <h1> 元素的颜色设置为 teal 色。

<h1>三眼鸭的编程教室</h1>

<style>
    @media (max-width: 800px) {
        h1 {
            color: teal;
        }
    }
</style>

可以试着缩放浏览器窗口看看以下文字颜色的变化。

$$demo

<h1>三眼鸭的编程教室</h1>

<style>

@media (max-width: 800px) { h1 { color: teal; } }

</style>

$$tip

更多的媒体特性查看 MDN 的媒体特性。

媒体查询没有样式优先级

媒体查询没有样式优先级，因此我们通常将其放在正常样式的后面，这样靠后定义的样式才能起效。

比如以下的颜色就永远不会改变。

<h1>三眼鸭的编程教室</h1>

<style>
    @media (max-width: 800px) {
        h1 {
            color: teal;
        }
    }
    h1 {
        color: pink;
    }
</style>

$$demo

<h1>三眼鸭的编程教室</h1>

与逻辑

使用 and 操作符可以让其必须匹配多个条件时才应用样式。

以下例子，需要满足不大于 800px 像素与不小于 600px 像素的条件。

<h1>三眼鸭的编程教室</h1>

<style>
    @media (max-width: 800px) and (min-width: 600px) {
        h1 {
            color: teal;
        }
    }
</style>

$$demo

<h1>三眼鸭的编程教室</h1>

<style>

@media (max-width: 800px) and (min-width: 600px) { h1 { color: teal; } }

</style>

或逻辑

使用 , 将多个条件分隔开，可以在其匹配任意条件时就应用样式。

以下例子，只需满足不大于 600px 像素或不小于 800px 像素的条件之一即可。

<h1>三眼鸭的编程教室</h1>

<style>
    @media (max-width: 600px), (min-width: 800px) {
        h1 {
            color: teal;
        }
    }
</style>

$$demo

<h1>三眼鸭的编程教室</h1>

<style>

@media (max-width: 600px), (min-width: 800px) {

h1 {

color: teal;

}

</style>

非逻辑

使用 not 操作符可以对表达式的结果取反，达到相反条件时才触发样式。

以下例子，表示当不大于 800px 这个条件不成立时。

<h1>三眼鸭的编程教室</h1>

<style>
    @media not (max-width: 800px) {
        h1 {
            color: teal;
        }
    }
</style>

$$demo

<h1>三眼鸭的编程教室</h1>

练习

完成实例效果，实例在宽度改变时会呈现不一样的布局样式。点击打开实例。 $$answer

<div class="container">
    <div class="row">
        <p>
            三眼鸭的编程教室三眼鸭的编程教室三眼鸭的编程教室三眼鸭的编程教室三眼鸭的编程教室三眼鸭的编程教室
        </p>
        <img
            class="image"
            src="https://qiniu.3yya.com/b5b136e5277c163429138de33f38e924/b5b136e5277c163429138de33f38e924.png"
        />
    </div>
    <div class="row">
        <p>
            三眼鸭的编程教室三眼鸭的编程教室三眼鸭的编程教室三眼鸭的编程教室三眼鸭的编程教室三眼鸭的编程教室
        </p>
        <img
            class="image"
            src="https://qiniu.3yya.com/b5b136e5277c163429138de33f38e924/b5b136e5277c163429138de33f38e924.png"
        />
    </div>
</div>
<style>
    .container {
        max-width: 700px;
        margin: 0 auto;
    }

    .row {
        display: flex;

        margin: 60px 0;
    }

    .image {
        width: 50%;
        height: 200px;
        object-fit: cover;
    }

    @media (max-width: 500px) {
        .row {
            flex-direction: column;
        }

        .image {
            width: 100%;
        }
    }
</style>