媒体查询 “@media” 可以针对不同设备以及不同屏幕尺寸设置不同的样式，特别是如果你需要设置响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
语法
// 写入 .css 文件或 <style> 标签
@media mediatype and|not|only (media feature) {
...
}// 导入外部 css 文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="filename.css">媒体类型
媒体类型 (mediatype) 用于描述设备的一般类别，支持的类型包括:
- all: 适用于所有设备
- screen: 适用于屏幕
- print: 适用于在打印预览模式下在屏幕上查看的分页材料和文档
- speech: 主要用于语音合成器
对于做网站而言，常用的则是 “screen” 与 “print”。
媒体特性
媒体特性 (Media features) 用于描述输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责监听这些特性是否存在或具体的值。每条媒体特性表达式都必须用圆括号包裹起来。
常用的媒体特性
- width: 视窗宽度
- min-width: 视窗最小宽度
- max-width: 视窗最大宽度
- orientation: 视窗旋转方向 ( 横向 “landscape” 、纵向 “portrait” )
- resolution: 输出设备的像素密度（分辨率）
- aspect-ratio: 视窗的宽高比
逻辑操作符
逻辑操作符（logical operators） “not”, “and”, 和 “only” 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。
“and” 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体特性与媒体类型结合在一起。
@media (min-width: 30em) and (max-width: 50em) { ... }“not” 运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用not运算符，则还必须指定媒体类型。
// 以下两种形式表达的是相同的意思
@media not screen and (color), print and (color) { ... }
@media (not (screen and (color))), print and (color) { ... }“only” 运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用 only 时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用only运算符，则还必须指定媒体类型。
@media only screen and (color) { ... }您可以使用 “or" 测试多个功能之间的匹配，如果任何功能为true，则解析为true。 例如，以下查询测试具有单色显示或悬停功能的设备：
@media (not (color)) or (hover) { ... }“,” 逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为true，则整个media语句均返回true。 换句话说，列表的行为类似于逻辑或or运算符。
书写示例
//当设备为屏幕，且最大宽度为10240px时，调用里面的样式
@media screen and (max-width: 1024px) {
...
}//当设备为屏幕，最大宽度为10240px且为竖屏时，调用里面的样式
@media screen and (max-width: 1024px) and (orientation: portrait) {
...
}//当设备为打印机，且最小宽度为600px时，导入此文件
<link rel="stylesheet" type="text/css" href="print.css" media="print and (min-width: 600px)">补充
1、设置Meta标签
在 head 标签内添加以下内容，让当前viewport的宽度等于设备的宽度:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">2、加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->3、设置IE渲染方式默认为最高
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8，为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的(这部分可以选择添加也可以不添加)
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">参考链接
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries