Media Queries媒体查询

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的页面效果。Media Queries有其自己的使用规则。
一个媒体查询由一个可选的媒体类型和媒体特性表达式，使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

link元素中的CSS媒体查询 
<link rel="stylesheet" media="(max- 800px)" href="example.css" />
样式表中的CSS媒体查询 
<style>
@media (max- 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

逻辑操作符

not、and和only

• and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求
• not操作符用来对一条媒体查询的结果进行取反。
• only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，
• 若使用了not或only操作符，必须明确指定一个媒体类型。

@media tv and (min- 700px) and (orientation: landscape) { ... }
//媒体查询仅在可视区域宽度不小于700像素并在横屏时有效，可以使用 and 操作符合并媒体属性

@media (min- 700px), handheld and (orientation: landscape) { ... }
//逗号分隔列表,在最小宽度为700像素或是横屏的手持设备上应用一组样式

@media not all and (monochrome) { ... }
//not 关键字应用于整个媒体查询，在媒体查询为假时返回真

 

---

最大宽度max-width,最小宽度min-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-480px){
 .ads {
   display:none;
  }
}

//“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-900px){
.wrapper{ 980px;}
}

---

定义断点

定义断点，那么断点是什么？简单的描述就是，设备宽度的临界点，也就是前面大家比较关心的Medial Queries中的min-width和max-width值是什么？那么在Responsive设计中，常见的断点有六种，我们今后的Medial Queries条件判断就可以根据这六个断点来定。