一、媒体查询简介

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

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

媒体查询的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关键字是用于在不支持媒体查询的浏览器中隐藏其内部定义的样式。

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

二、媒体类型查询

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

参数名	描述
all	用于所有设备
print	用于打印设备或打印预览
screen	用于带有屏幕的设备，如电脑、手机等
speech	用于发声设备，如屏幕阅读器

上面已经介绍过，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表示图像是被逐行绘制到屏幕上的（所有的电脑屏幕都使用逐行扫描）。

总结

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

CSS3之媒体查询 - @media相关推荐

css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
CSS3的媒体查询@media
CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页,页面会根据浏览器长宽来渲染页面. 语法: @media mediaType and|not|only (medi ...
CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
文章目录媒体查询介绍 Media Queries具体使用一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用四.设备屏幕的输出宽度Device ...
html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3 推出了媒体查询media.用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在 CSS 文件中根据屏幕分 ...
html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
移动开发—媒体查询(Media Query)
移动开发-媒体查询(Media Query) 1.使用@media,可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中,页面也会 ...
CSS媒体查询“@media”在调试中切换移动设备时不起作用。
今天在学习CSS响应式网页设计中的媒体查询,遇到个有趣的问题,主要就是在调试过程中切换移动设备和电脑,同样的代码将有不同的结果.在切换移动设备调试时@media对于"max-width=97 ...
媒体查询(@media语法、案例)详解
媒体查询 @media 语法 1. 直接写在 CSS 样式中 2. 针对不同的媒体设备,从外部链入不同的 stylesheets(外部样式表) 使用 @media 实现网页变色龙 @media 语法 ...

CSS3之媒体查询 - @media

目录