媒体查询
媒体查询 = 【媒体(媒介)类型】 + 0/多个表达式【媒体特性】
一、css2中的媒体查询
在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在；media属性用于为不同的媒介类型规定不同的样式，而真正广泛使用的媒介类型是'screen'、'print'和'all'
all 适合所有设备screen 计算机屏幕（默认值）print 打印预览模式 / 打印页tty 电传打字机以及使用等宽字符网格的类似媒介tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）projection 放映机handheld 手持设备（小屏幕、有限的带宽）braille 盲人用点字法反馈设备aural 语音合成器
/* 【1】 *//* 【2】 */ /* 计算机屏幕 */ /* => 对纵向放置的显示屏使用该样式 */ /* 对非纵向放置的显示屏使用该样式 */ /* 对视口宽度大于800像素且纵向放置的显示屏使用该样式并且样式应用于所有的投影仪 */
二、css3中的媒体查询
css3中的media requires Level 3，既可以设置设备的类型，又可以获取诸如窗口宽度、屏幕方向、分辨率等媒体特性。
- 媒体特性(媒体属性)如下
width – 输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度height – 输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度device-width – 输出设备的宽度（整个屏幕或页的高度，而不是仅是渲染区域）device-height – 输出设备的高度（整个屏幕或页的高度，而不是仅是渲染区域）orientation – 设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式aspect-ratio – 输出设备目标显示区域（视口宽高比）的宽高比device-aspect-ratio – 输出设备的宽高比（设备屏幕的宽高比）resolution – 输出设备的分辨率（像素密度） 分辨率单位(dpi, dpcm, dppx)color – 检查设备支持多少种颜色等（16、8...）color-index – 输出设备中颜色查询表中的条目数量mono chrome – 指定了一个黑白（灰度）设备每个像素的比特数scan – 检查电视输出设备是顺序扫描还是隔行扫描grid – 判断输出设备是网格设备还是位图设备
/* Media Queries Level 4规范中新的媒体特性 */update – 根据设备的更新频度区分其类型 (none 如打印机, slow 如电子墨水, fast 正常设备)scripting – none 不支持脚本或未启用 | initial-only 仅支持页面初始化脚本 | enabled – 支持脚本并且已启用pointer – 设备交互的精度 (coarse不精确如手指, fine 精确如鼠标, none 无指点)hover – 设备是否支持悬停状态
三、使用形式
3.1 基本语法
@media screen { body{ font-size: 14px; }}@media screen, print { body { font-size: 20px; }}@media (width: 30em) { nav li { display: block; }}@media screen and (width: 30em) { nav li { display: block; }} 3.2 嵌套
/*例子1:媒体类型套媒体特性*/@media screen{ @media (min-width: 20em) { img{ } } @media (min-width: 40em) { img{ } }}/*例子2:媒体特性多层嵌套*/@media (hover: on-demand) { @media (pointer: coarse) { input[type=checkbox] ~ label { padding: .5em; } } @media (pointer: fine) { input[type=checkbox] ~ label { padding: .1em; } }} 3.3 否定式查询
可以用关键字not表示一个否定查询；not必须置于查询的一开头并会对整条查询串生效，除非逗号分割的多条
@media not screen { /* 非屏幕 */}@media not print and (min-resolution: 1.5dppx) { /* 非屏幕并且最小像素密度不是1.5ppx */}@media not (hover: hover), not (pointer: coarse) { /* note A 或 not B */} /*非法：not不在最前面*/@media not print and not (min-resolution: 2dppx) {}/*非法：not不在最前面*/@media screen and not (min-resolution: 2dppx) {} 
3.4 与
3.5 only
防止老旧浏览器，因不支持带媒体属性的查询，而应用到了给定的样式。
四、媒体特性（或媒体属性）
4.1 根据媒体特性的范围查询
指定一个固定的宽度通常是没有意义的，更多的情况下，我们需要限定的是类似“小于等于”或“大于等于”这样的范围，而大多数媒体特性可以通过添加“max-”和“min-”前缀达到上述目的
/*0 至 30em*/@media (max-width: 30em) { nav li { display: block; }}/*30em 至 100em*/@media (min-width: 30em) and (max-width: 100em) { nav li { display: block; }} 4.2 选项式的媒体特性查询
不同于取值连续的范围式查询，很多媒体特性只有几个固定的取值可供选择
/* - portrait 竖屏 *//* - landscape 横屏 */@media screen and (orientation: portrait) { #logo { height: 10vh; width: auto; }} | 选项式的媒体特性 | 取值选项 | 备注 |
|---|---|---|
| grid | 布尔值(使用时直接写成 (grid) 来判断) | 是网格设备还是位图设备 |
| hover | none, on-demand, hover | 是否支持悬停状态 |
| orientation | portrait, landscape | 设备方向 |
| light-level | dim, normal, washed | 环境光 |
| pointer | none, coarse, fine | 设备交互的精度 |
| scripting | none, initial-only, enabled | 是否支持脚本 |
| update | none, slow, normal | 根据设备的更新频度区分其类型 |
| scan | interlace, progressive | 电视输出设备是顺序扫描还是隔行扫描 |
| any-hover | none, on-demand, hover | can be used to check whether any available input mechanism allows the user to hover over elements |
| any-pointer | none, coarse, fine | Presence and accuracy of any pointing device available to the user |
| inverted-colors | none, inverted | useragent或OS是否倒置了颜色 |
| overflow-block | none, scroll, optional-paged, paged | 在block轴方向，当内容超出初始包含块或视口时，设备或浏览器的行为 |
| overflow-inline | none, scroll | 在inline轴方向，当内容超出初始包含块或视口时，设备或浏览器的行为 |
五、其他
5.1 引入外部文件时的媒体查询
@import url(typography.css) screen, print;@import url(hi-res-icons.css) (min-resolution: 1.5dppx), (min-resolution: 96dpi);
5.2 在style标签上的媒体查询
5.3 利用媒体查询实现图片自适应
这里我们使用最新的picture，但是picture在IE上支持并不是很好，因此我们一般都会使用picturefill来进行兼容【具体方法是引入该js文件即可】
5.4 在Javascript中使用媒体查询
var isWideScreen = matchMedia("(min-width: 960px)");console.log(isWideScreen.matches); //是否匹配 true | falseconsole.log(isWideScreen.media); //"(min-width: 960px)" - 监听媒体的更改
function toggleClass(mq) { if (mq.matches) { document.body.classList.add('widescreen'); } else { document.body.classList.remove('widescreen'); }}//添加监听isWideScreen.addListener( toggleClass );//撤销监听isWideScreen.removeListener( toggleClass );