媒体查询

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>

$$