通过媒体查询（media query）定义浏览器在何种媒体环境中使用指定的样式表

用法

媒体查询可以在以下几个地方使用

  • <link>标签的media属性

  • <style>标签的media属性

  • @import声明的媒体描述部分

  • @media声明的媒体描述部分

举个简单的例子：在打印时使用不同的样式

1
<div class="example">example</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@media screen {
    .example {
        margin: 100px;
        width: 300px;
        height: 100px;
        color: brown;
        background: skyblue;
    }
}
@media print {
    .example {
        margin: 100px;
        width: 300px;
        height: 100px;
        font-size: 30px;
        line-height: 100px;
        text-align: center;
        color: skyblue;
        background: brown;
    }
}

打开浏览器可以观察到

media-example-1

打开打印预览

media-example-2

媒体类型及媒体描述符

媒体类型

  • all：用于所有展示媒体

  • print：用于打印文档或者预览文档时使用

  • screen：在屏幕媒体上展示文档时使用

媒体描述符

一个媒体描述符包含一个媒体类型和一个或多个媒体特性列表，其中特性描述符要放在圆括号中

1
2
3
@media screen and (min-resolution: 961api) {
    /* code */
}

多个媒体描述符之间的逻辑关键字

  • and

    and关键字用于合并多个媒体属性或合并媒体属性与媒体类型，连接的两个或多个媒体特性必须同时满足使用条件，整个查询得到的结果才是真值

    1
    2
    3
    @media (min-width: 700px) and (orientation: landscape) {
        /* code */
    }

  • not

    对整个查询取反，假如所有条件为真，那么样式表不会应用

    not只能在媒体查询的开头使用

  • 逗号

    媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的

  • only

    在不支持媒体查询的旧浏览器中隐藏样式表

常见媒体特性描述符

width min-width max-width device-width min-device-width max-device-width height min-height max-height device-height min-device-height max-device-height aspect-ratio min-aspect-ratio max-aspect-ratio device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio color min-color max-color color-index min-color-index max-color-index monochrome min-monochrome max-monochrome resolution min-resolution max-resolution orientation
scan grid