@media媒体查询—

媒体查询的核心思路，就是根据不同的设备宽度设置断点，然后书写css样式覆盖之前的样式。

1、媒体类型

media属性用于为不同的媒介类型规定不同的样式：

screen 计算机屏幕（默认值）
tty 电传打字机以及使用等宽字符网格的类似媒介
tv 电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection 放映机
handheld 手持设备（小屏幕、有限的带宽）
print 打印预览模式 / 打印页
braille 盲人用点字法反馈设备
aural 语音合成器
all 适合所有设备

真正广泛使用且所有浏览器都兼容的媒介类型是’screen’和’all’

2、媒体属性

3、逻辑操作符

操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询。
and
　　用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。
　　注意：在不使用not或only操作符的情况下，媒体类型是可选的，默认为all。
or
　　将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符。
not
　　not操作符用来对一条媒体查询的结果进行取反
　　注意：not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。
only
　　only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

@media only screen and (max-width:1000px){/* 在老式浏览器中被解析为media = "only"，因为没有一个叫做only的设备，所以实际上老式浏览器不会应用里面的样式 */
}@media screen and (max-width:1000px){/* 在老式浏览器中被解析为media = "screen"，它把后面的逻辑表达式忽略了，所以老式浏览器会在所有的宽度下都应用里面的样式 */
}

所以，在使用媒体查询时，only最好不要忽略

4、常见的设备类型和宽度

这里说的宽度是用来编码的布局宽度。

超小屏幕（手机） 768px以下
小屏设备（平板） 768px-992px
中等屏幕（旧式电脑） 992px-1200px
大屏设备（现代电脑） 1200px以上

5、css2中的媒体查询

CSS2中media: 通过标签的media属性为样式表指定设备类型。

CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)"  href="style.css">

既然CSS2可以实现CSS的这个效果为什么不用这个方法呢，很多人应该会问，但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

6、css3中媒体查询的常规写法

如果媒体查询@media使用的是相对单位，如rem，这里有一个坑需要着重强调一下：
　　一般而言，rem是相对于html的字体大小的。但是，由于媒体查询的级别非常高，它并不是html的子元素，不是相对于html，而是相对于浏览器的，而浏览器的默认字体大小是16px。

@media all and (min-width:800px) and (orientation:landscape){/* 满足横屏以及最小宽度为800px的条件应用里面的样式 */body{background:red;}
}
@media only screen and (min-width: 960px) and (max-width:1200px){/* 在计算机屏幕中宽度在[960px,1200px]区间会应用里面的样式 */body{background:#000;}
}@media only screen and (max-width: 960px){/* 在计算机屏幕中宽度小于等于960px会应用里面的样式 */body{background:#000;}
}