Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的页面效果。Media Queries有其自己的使用规则。
一个媒体查询由一个可选的媒体类型和媒体特性表达式，使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。
link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
样式表中的CSS媒体查询
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
逻辑操作符
not、and和only
and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求
not操作符用来对一条媒体查询的结果进行取反。
only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，
若使用了not或only操作符，必须明确指定一个媒体类型。
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
//媒体查询仅在可视区域宽度不小于700像素并在横屏时有效，可以使用 and 操作符合并媒体属性
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
//逗号分隔列表,在最小宽度为700像素或是横屏的手持设备上应用一组样式
@media not all and (monochrome) { ... }
//not 关键字应用于整个媒体查询，在媒体查询为假时返回真
最大宽度max-width,最小宽度min-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
//“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
定义断点
定义断点，那么断点是什么？简单的描述就是，设备宽度的临界点，也就是前面大家比较关心的Medial Queries中的min-width和max-width值是什么？那么在Responsive设计中，常见的断点有六种，我们今后的Medial Queries条件判断就可以根据这六个断点来定。
Media Queries常见尺寸.jpg
