大家知道多媒体和媒体查询吗？这俩哥们真的没什么联系；就像雷锋和雷峰塔，没有半毛钱关系。今天看一看媒体查询：
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
1、媒体查询操作方式
实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。
2、媒体查询结构
@media only screen and (min-width:40em) {
body { background-color:blue;}
}
2.1 @media
以@media开头来表示这是一条媒体查询语句。
2.2 设备类型（默认为all）
2.2.1 screen
紧跟在@media后面的是一个或者多个表达式，可以判别为真或假。在创建媒体查询时，必须以媒体类型（此处为screen）作为第一个表达式：@media only screen。与媒体类型相对应的有：print（打印机）、braille（盲文）或者all（全部）等其他类型。
2.3 and
and是一个关键字，表示有多个表达式，screen是第一个表达式，and后为另一个表达式。需前后表达式都为真时，整条查询结果才为真（也就是“且”的意思）。与and相对应的关键字有：or、not等。
2.4 (min-width:40em)
and之后的(min-width:40em)为第二个表达式（表达式在小括号内），所有的表达式都应包含在括号内，除非它是只有一个单词的媒体类型表达式（如：screen、print等）。
前缀min-表示“至少”，即“大于等于”的意思。
前缀max-表示“至多”，即“小于等于”的意思。
2.5 ｛｝
花括号里面的内容表示整条媒体查询结果为真时的CSS 样式。
在使用媒体查询时，不要把所有样式都放入媒体查询中。正确做法是先声明适用于所有视口宽度的非媒体查询样式，然后只是用媒体查询去覆盖掉在特定宽度中用到的样式。
body {
background-color:green;
}
@media only screen and (min-width:40em) {
body {background-color:blue;}
}
3、在样式表链接中使用媒体查询
<link rel="stylesheet" href="styles/mainstyles.css">
<link rel="stylesheet" href="styles/widerscreen.css"
media="only and (min-width:40em)">
<link rel="stylesheet" href="styles/mainstyles.css">此样式表表示应用于所有设备，<link rel="stylesheet" href="styles/widerscreen.css" media="only and (min-width:40em)">表示仅在查询结果为真（视口宽度大于等于40em）时应用的设备。
4、媒体特性
媒体查询可以查询许多媒体特性，如：视口宽度和高度、屏幕宽度和高度、方向、宽高比和分辨率（屏幕上每个维度上的像素个数）等。
其中大多数都可以加上min-或max-前缀。
4.1 视口宽度和高度（媒体查询中最常用到的设备属性）
- 视口宽度：width
- 视口高度：height
视口指的是浏览器窗口中实际包含网页的那部分区域。浏览器窗口减去页面边上的滚动条，以及顶部或底部的工具栏和菜单，剩下的区域就是视口。
4.2 屏幕宽度与高度
屏幕宽度：device-width
-
屏幕高度：device-height
@media only screen and (max-device-width:40em) {...}
4.3 方向
-
方向：orientation
值为：横排方向（ landscape）竖排方向（portrait）@media only screen and (orientation:landscape) {...}
4.4 宽高比
- 视口宽高比：aspect-ratio
- 设备屏幕宽高比：device-aspect-ratio
常见的显示器宽高比时16:9（如19201080或1366768像素）或者是16:10（1280800）。iphone 3和iphone 4s是3:2（480320和960640），而iPhone 5则是16:9（1136640）。安卓手机通常是4:3、3:2、16:10或16:9。
@media only screen and (min-device-aspect-ratio:16/9) {...}
4.5 分辨率
-
设备屏幕的分辨率：resolution
@media only screen and (resolution:3oodpi) {...}
4.6其他媒体特性
- color
- color-index
- monochrome
- scan
- grid
5、浏览器支持
需要担心的浏览器是IE8及其更早版本。是不是还记得can i use这个网站很方便；
当需要在IE8及其更早版本中使用媒体查询时，我们可以使用条件注释使代码仅针对Internet Explorer。
条件注释也是一种查询，出现在HTML 中，而不是CSS中。
为了让网站能在老版的IE中正确显示，需要使用polyfill或利刃shive脚本。我们所要做的就是下载这个文件，然后在<head>元素中链接他，如：
<!--[if it IE 9]>
<script src="files/html5shiv.js"></script>
<![endif]>-->
js如何使用媒体查询
在利用媒体查询进行响应式布局开发时，用 js 写了一个动画，但不想让它在小屏幕上显示，这就要对屏幕尺寸进行筛选，那么在 js 中是如何使用媒体查询的呢？
var result1 = window.matchMedia('(min-width:1200px)');
var result2 = window.matchMedia('(min-width:992px)');
var result3 = window.matchMedia('(min-width:768px)');
if(result1.matches) {
console.log("大屏幕(>=1200)");
}else if(result2.matches){
console.log("中等屏幕(>=992&<=1200)");
}else if(result3.matches){
console.log("小屏幕(>=768&<=992)");
}else{
console.log("超小屏幕(<=768)");
}
又写了不少东西；其实用熟了，就好了；童鞋们读完以后是不是思路清晰了？明白了各个关键字的意思；想熟练i应用还是需要练习的；多写几个页面。
