媒体查询
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
为什么使用媒体查询
使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。
媒体查询的使用
引入方式
媒体查询有两种引入方法：
link元素中的CSS媒体查询
css样式表中媒体查询
语法
基本语法
<!-- 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操作符，必须明确指定一个媒体类型。
你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于or操作符。
eg：and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型,只有当每个属性都为真时，结果才为真 @media and (max-width:600px) and (min-width: 800px;){......},此代码表示屏幕宽度在600-800px时，使用上述样式。
注意事项
最好在使用媒体查询时引入如下meta标签保证媒体查询的精准.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width = device-width：宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)
参考资料
