一、媒体查询简介

媒体查询

，简单来说就是检测用户浏览当前网页所使用的设备。常见的媒体设备包括电脑、智能手机、平板电脑、屏幕阅读器、打印设备等。除了查询用户所使用的设备类型，我们可能还需要知道设备的屏幕尺寸、分辨率、设备方向等信息，以便我们制作出可以在各种设备上查看的网页效果。

媒体查询包含两部分：

媒体类型查询

和

媒体参数查询

。媒体类型查询主要检测用户所使用的设备类型；而媒体参数查询则是检测该设备的某些参数，如宽高、分辨率等。

媒体查询的css语法为：

@media (only) mediaType and|not|only (media feature) {
    .btn { ... }
    ...
}

这里的

mediaType

指代媒体类型，当存在多个值时，可以用逗号隔开，如：

@media screen, print ...

这表示当前的样式将用于屏幕（screen）和打印设备（print）。


and

、

not

、

only

是媒体查询支持的三个逻辑连接词，用于表示后续参数的限制类型。


and

表示逻辑

与

，表示当前设备需要满足后续参数，当前样式才生效；

not

表示逻辑

非

，表示当前设备不满足后续参数时，样式才会生效；

only

是一个特殊的逻辑词，它没有实际含义，一般只用在媒体类型前面，用于兼容不支持媒体查询的旧浏览器。


（media feature）

设定了设备参数，如最大宽度、分辨率等，通过and或not可以设置多个参数。在满足这些参数的设备上，媒体查询中所定义的样式将会生效。

媒体查询也可以直接作为

link

标签的

media

属性来定义，以使浏览器在不同的媒体设备上加载不同的css文件，如：

<link rel="stylesheet" media="screen and 
    (max-width: 1000px)" href="...">

当用户使用了带有屏幕的设备，且屏幕宽度不大于1000像素时，该样式文件会被下载。

补充

：关于

only

关键字，我们进行简单的说明。

W3C文档是这样描述的：The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

翻译过来就是：only是为了在不支持媒体查询的浏览器中隐藏样式表，浏览器处理以only开头的关键词时将会忽略only。

在支持媒体查询的浏览器中，

only screen

和

screen

的含义是完全相同的。但在不支持媒体查询的浏览器中，浏览器在解析到

only

关键字时，会将其认为是一种媒体类型，由于不存在

only

这种媒体类型，因此内部的样式会始终被浏览器忽略。而如果没有

only

关键字，内部的样式则可能会生效。

也就是说，

only

关键字是用于在不支持媒体查询的浏览器中隐藏其内部定义的样式。

下面我们分别来看媒体查询支持哪些参数。

二、媒体类型查询

目前在使用的媒体类型包括三种，屏幕、打印设备和发声设备。对应的有四个值：

上面已经介绍过，

only

关键字可以兼容不支持媒体查询的旧版浏览器。

当样式表适用于多种设备时，应该用逗号隔开，如：

@media screen, print {
    ...  // 样式
}

当需要排除某个设备时，可以使用

not

关键字，如：

@media not print {
    ...  // 样式
}

不过在媒体类型前使用

not

没有太大必要，因为媒体类型所支持的值本身就很少。

三、媒体参数查询

这部分主要是查询当前设备的一些设备参数：

1. aspect-ratio

定义输出设备中的页面可见区域宽度与高度的比率。

该值派生了另外两个参数：

min-aspect-ratio

和

max-aspect-ratio

，顾名思义，分别指最大宽高比和最小宽高比。这两个派生参数相对来说更加常用。用法如下：

@media screen and (max-aspect-ratio: 20/11) {
    .btn { ... }
}

当屏幕宽度与高度的比值小于或等于

20:11

时，为

.btn

定义的样式将会生效。也就是说，

max-aspect-ratio

定义了宽高比的最大值。


min-aspect-ratio

也是同样的道理，它定义的是宽度和高度的最小值。

假如同时定义了最大值和最小值，而屏幕的宽高比恰好就是这个临界值呢？

@media screen and (max-aspect-ratio: 20/11) {
    .btn { ... }  /* 小于等于20:11的样式 */
}
@media screen and (min-aspect-ratio: 20/11) {
    .btn { ... }  /* 大于等于20:11的样式 */
}

假如屏幕宽高比恰好为

20:11

，则遵从css的覆盖原则，哪个定义的后面，哪个生效。另外最大值和最小值不一定必须是同一个值，它们可以相互交叉，也可以没有交集，如：

@media screen and (max-aspect-ratio: 4/1) {
    .btn { ... }
}
@media screen and (min-aspect-ratio: 2/1) {
    .btn { ... }
}

此时，当宽高比大于

2:1

，小于

4:1

时，两个媒体查询条件都是满足的，这时会以后定义的样式优先。

假如最大值和最小值没有交集，那么当设备宽高比处在两者之间时，则相当于没有定义相关样式。

后面出现的其他属性的最大值和最小值也都是同样的道理。

2. color

定义当前设备表示颜色时每个原色的位数。

我们知道，不同屏幕能显示的色彩数量可能是不同的。一般来说，rgb颜色表示法要求将红、绿、蓝的数量分别用8个比特位来表示，也就是

11111111

这样的值，它能表示的单个原色范围是

0-255

。这样的设备，其

color

值就是8。

但也有一些更低端或更高端的设备，不使用8比特位表示一个原色的数量，它们使用的位数，就是该设备的

color

值。如果各个原色所使用的位数不同，则

color

取最小的那个值。


color

也派生出两个值：

min-color

和

max-color

，分别表示最小原色位数和最大原色位数。如：

@media screen and (min-color: 8){ ... }
@media screen and (max-color: 8){ ... }

这里分别为单个原色大于8位和单个原色小于8位的设备定义样式。

3. color-index

表示当前设备所使用的的索引色数量。

索引色是将设备支持的所有颜色编撰为一个列表，每个颜色有自己特定的索引值，使用特定的索引，即可找到该颜色。因此，索引色的数量就是设备支持的最大颜色数量。


color-index

也派生出两个值：

min-color-index

和

max-color-index

，表示当前设备支持的最大索引颜色数量和最小索引颜色数量。

@media screen and (min-color-index: 150000){ ... }
@media screen and (max-color-index: 150000){ ... }

它们分别定义了当索引色数量大于等于150000和小于等于150000时应该使用的样式。

4. width、height

定义设备的宽度和高度。它们分别派生出了以下四个值：

min-width

、

max-width

、

min-height

和

max-height

，分别表示最小宽度、最大宽度、最小高度和最大高度。

这四个参数在媒体查询中是非常常用的，是常见的屏幕适配解决方案，如：

@media screen and (min-width: 1000px) and (min-height: 600px){ ... }

这个样式将在宽度不小于1000像素，高度不小于600像素时生效。


width

和

height

，以及上述派生出的四个值，分别对应了一组已经被标准废除的值：

device-width

、

device-height

、

min-device-width

、

max-device-width

、

min-device-height

、

max-device-height

。尽管这些值仍然被某些浏览器支持，但请尽量避免使用它们。

5. grid

该参数用于检测当前设备是否为基于点阵或网格的风格。

我们常见的屏幕都是基于二进制位图（bitmap）的，但也有某些屏幕可能是基于网格或点阵的，如LED显示屏。基于二进制位图的设备，

grid

参数值为0，基于网格或点阵的，

grid

值为1。

6. monochrome

定义单色设备上每个像素点的颜色位数。

如果当前设备仅支持一种颜色，那么我们就不需要像rgb颜色模式下使用r、g、b三个参数来表示一个颜色的数量，我们只需要指定设备所支持的这个颜色的数量即可。同rgb一样，它也是一个二进制数，它的位数就是该单色设备的

monochrome

值。

如果当前设备是彩色设备，那么

monochrome

的值始终为0。


monochrome

同样派生出了

min-monochrome

和

max-monochrome

，表示最小位数和最大位数。

@media screen and (min-monochrome: 8){ ... }

当某个单色设备至少使用8位来表示一个像素的颜色时，该样式生效。

下面的样式则可以检测当前设备是否为彩色设备：

/* 彩色设备 */
@media screen and (monochrome: 0){ ... }

/* 单色设备 */
@media screen and (monochrome){ ... }

7. orientation

检测当前设备的高度是否大于或等于宽度，常用于判断当前设备是处于横屏还是竖屏状态。

该参数允许两个值：

portrait

和

landscape

。

portrait

表示高度大于或等于宽度，此时设备处于竖屏状态；而

landscape

则是相反的情况，此时屏幕处于横屏状态。

/* 竖屏样式 */
@media screen and (orientation: portrait){ ... }

/* 横屏样式 */
@media screen and (orientation: landscape){ ... }

8. resolution

检测当前设备的分辨率，也叫像素密度。

所谓分辨率，指的是在单位面积内像素点的数量。这个单位可能是英寸、厘米等，对应的单位为dpi、dpcm，其中

1dpi ≈ 0.39dpcm

，而

1dpcm ≈ 2.54dpi

。它也派生出两个参数：

min-resolution

和

max-resolution

。

@media screen and (min-resolution: 96dpi){ ... }
@media screen and (max-resolution: 32dpcm){ ... }

它们分别定义了不同像素密度屏幕下的样式。

9. scan

定义与扫描装置有关的参数。

当启用了扫描设备，如扫描仪时，该参数可以判断被扫描的图像是如何绘制到屏幕上的。

该参数支持两个值：

interlace

和

progressive

。

interlace

表示图像被扫描仪扫描之后，是按照奇数行和偶数行交替被绘制到屏幕上的（一些电视机使用这种隔行扫描）；

progressive

表示图像是被逐行绘制到屏幕上的（所有的电脑屏幕都使用逐行扫描）。

总结

以上就是媒体查询所支持的所有参数。媒体查询对构建响应式系统有着相当重要的作用，如果有兼容不同浏览设备的需要，那么对媒体查询还是要有一个基本的了解。