## 一、什么是媒体查询？ * 媒体指的就是各种设备 (移动设备, PC设备) * 查询指的是要检测属于哪种设备 媒体查询：通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览。媒体查询是响应式网页设计的关键部分，因为它允许您根据视口的大小来创建不同的布局。 ## 二、媒体查询语法 ~~~css @media mediatype and|not|only|, (media feature) { /* css-code; */ } ~~~ * `and` 可以将多个媒体特性链接到一块，相当与且 * `not` 排除某个媒体特性，相当于非，可以省略 * `only` 指定某个特定的媒体类型，可以省略 * `,` 设备列表，相当于或 你也可以针对不同的媒体使用不同`stylesheets`： ~~~html <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="..."> ~~~ ## 三、媒体类型 你可以指定的媒体类型可能是： * `all`：用于所有设备 * `print`：用于打印机和打印预览 * `screen`：用于电脑屏幕，平板电脑，智能手机等 * `speech`：用于屏幕阅读器等发声设备 如果是打印页面，则以下媒体查询将仅将正文设置为 12pt。在浏览器中加载页面时，它将不适用。 ~~~css @media print { body { font-size: 12pt; } } ~~~ ## 四、媒体功能 指定类型后，你可以使用规则定义媒体功能。 | 媒体特性 | 值 | 可用媒体类型 | 接受 min / max | 简介 | | :-: | :-: | :-: | :-: | :-: | | height | length | 视觉屏幕/触摸设备 | yes | 定义输出设备中的页面可见区域高度 | | width | length | 视觉屏幕/触摸设备 | yes | 定义输出设备中的页面可见区域宽度 | | device-height | length | 视觉屏幕/触摸设备 | yes | 定义输出设备的屏幕可见高度 | | device-width | length | 视觉屏幕/触摸设备 | yes | 定义输出设备的屏幕可见宽度 | | orientation | portrait / landscape | 位图介质类型 | no | 定义输出设备中的页面可见区域高度是否大于或等于宽度 | | aspect-ratio | ratio | 位图介质类型 | yes | 定义输出设备中的页面可见区域宽度与高度的比率 | | device-aspect-ratio | ratio | 位图介质类型 | yes | 定义设备宽度和高度的比率，即设备屏幕长宽比。如常见的显示器比率：4/3，16/9，16/10 | | color | integer | 视觉媒体 | yes | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于 0 | | color-index | integer | 视觉媒体 | yes | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于 0 | | monochrome | integer | 视觉媒体 | yes | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 | | resolutation | resolution | 位图介质类型 | yes | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm | | scan | progressive / interlace | 电视类 | no | 定义电视类设备的扫描工序 | | grid | integer | 栅格设备 | no | 用来查询输出设备是否使用栅格或点阵 |