CSS中的Media Query（媒介查询）是什么？
作为CSS3规范的一部分，媒体查询可以针对不同的屏幕尺寸设置不同的样式，它为每种类型的用户提供了最佳的体验，网站在任何尺寸设置下都能有最佳的显示效果。
通过不同的媒体类型和条件定义样式表规则。
媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width
Media Queries功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式
先看一个例子：
页面的布局会根据浏览器的尺寸在1列，2列和4列之间切换
http://colly.com/
媒体查询实例
通过此实例观察媒体查询的功能后，再来分析语法
body{background-color:grey; } //正常情况是灰色
@media screen and (max- 768px) { //宽度小于768px的时候被应用 移动端
.class { background: #ccc; } }
@media screen and (min- 768px) and (max- 992px) { //宽度在 768px 和 992px 之间的时候被应用
.class { background: #333; } }
@media screen and (min- 992px) {//宽度大于 992px 的时候被应用 pc端
.class {background: #666;} }
注意：这三个媒体查询这样子排序有利于代码结构清晰。
使用Media Query的基本语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
以上通过@media定义媒体查询，mediatype代表了设备类型，目前只有screen最常用，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度。
@media screen and (max-960px) 的意思为：当前设备为screen（电脑、平板、手机）时，并且最大宽度为960时，显示的样式。
媒体类型有：
all 所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 应用于屏幕阅读器等发声设备
加载媒体查询的最佳方法：
使用多个独立的CSS文件会增加HTTP请求的数量，使页面加载变慢。所以我们的媒体查询样式的文件尽量放在一个里面，以注释加以区分。
阻止移动浏览器自动调整页面大小
ios和android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的<head>标签中插入一个<meta>标签，meta标签中可以设置具体的宽度或缩放比。下面为示例
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
name=”viewport” 说明此meta标签定义视口的属性
initial-scale=2.0 意思是将页面放大两倍
width=device-width 告诉浏览器页面的宽度等于设备宽度
允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半
<meta name=”viewport” content=”width=device-width, maximum-scale=3, minimum-scale=0.5” />
禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” /> //user-scalable=no是禁止缩放
###css3媒体查询
css3媒体查询是响应式方案核心
###媒体类型
all 所有媒体（默认值）
screen 彩色屏幕
print 打印预览
projection 手持设备
tv 电视
braille 盲文触觉设备
embossed 盲文打印机
speech “听觉”类似的媒体设备
tty 不适用像素的设备
###媒体属性
width （可加max min前缀）
height （可加max min前缀）
device-width （可加max min前缀）
device-pixel-ratio（可加max min前缀，需要加webkit前缀）
orientation portrait竖屏
landscape横屏
###操作符，关键字 (only,and,(，or),not)
only：
防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式.
@media only screen and (min-800px ){
规则；
规则
}
@media screen and (min-800px ){
规则；
规则
}
在老款的浏览器下
@media only ---> 因为没有only这种设备 规则被忽略
@media screen ---> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询
建议在每次抒写media query的时候带上only
and:
连接媒体属性 、连接媒体类型
对于所有的连接选项都要匹配成功才能应用规则
or(,) : 和and相似
对于所有的连接选项只要匹配成功一个就能应用规则
not:取反