媒体查询

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

媒体查询语法：

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

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

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

媒体类型

媒体类型有以下选择项：

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

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

媒体表达式

以下是一个例子，在视窗宽度最多为 400像素时，将 <h1> 元素的颜色设置为 teal 色。

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

$$demo

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

<style>

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

</style>

$$