响应式设计(Responsive Design)是一种让网页针对不同设备和浏览器响应不同的效果的方法。而媒体查询是响应式设计中最常用的方法之一。
语法
媒体查询包含一个媒体类型和至少一个的表达式(宽度、高度、颜色等等)的媒体属性。如果媒体查询中的媒体属性和文档展示的设备相符，则查询结果为 true ，并且媒体查询中的所有表达式为 true 。
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!--样式表中的媒体查询 -->
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
逻辑操作符
and
and操作符用来把多个媒体属性组合起来，每个属性为true的时候返回查询结果为真。
@media (min-width: 700px) and (orientation: landscape) { ... }
not
not操作符用来对一条媒体查询的结果进行取反。
@media not all and (monochrome) { ... }
逗号分隔符
逗号分隔符相当于逻辑运算里的or
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
前半部分我用的是一个宽700px以上的屏幕设备，媒体语句为真。,之后的部分,表示我用的是一个手持设备的横屏模式，宽不管够不够700px都返回真。
only
only操作符表示在媒体查询匹配成功的情况下应用样式
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
媒体属性
Mozilla media queries 文档里有详细的属性说明和用法。
这里不再列出，需要的可以自行查阅。
viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The Viewport文档介绍了说明Viewport的使用要点。可以和媒体查询结合使用，让你的响应式布局在移动浏览器上现实的更好。
