一、css3 media媒体查询概述
随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，如今淘宝，凡客，携程等等很多公司都已经在使用这项技术，并完美的应用在了自己的网站上了。
1.1、为啥有媒体查询:
移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。
Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满）
1.2、什么是媒体查询?
媒体查询是向不同设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。
css2: media type ,media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。
css3: media query ,media query是CSS3对media type的增强，事实上我们可以将media query看成是media type+css属性(媒体特性Media features)判断。
二、使用媒体查询的准备工作
2.1、设置Meta标签
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">这段代码的几个参数解释：
2.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]-->2.3、设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:
为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：
<meta http-equiv="X-UA-Compatible" content="IE=edge">不过最近又发现了一个更给力的写法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。
三、CSS3 媒体查询用法
3.1、多媒体查询语法
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
@media not|only mediatype and (expressions) {
CSS 代码...;
}如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。
除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。
你也可以在不同的媒体上使用不同的样式文件：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">demo如下：当前屏幕的宽度大于等于400px时应用 styleA.css样式文件。
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">3.2、CSS3 多媒体类型
| all | 用于所有多媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器 |
3.3、多媒体查询简单实例
使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
以下实例中在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}3.4、多媒体查询综合案例
在1200px像素以上的视口,显示1170px 大屏幕显示器
在992px-1200px的视口上,显示970px 中等屏幕显示器
在768px-992px的视口上,显示750px pad设备
在低于768px的视口上,显示100%宽度 移动设备
表达式语法:
表达式：像素
min-width: 最小宽度
max-width: 最大宽度
min-height: 最小高度
max-height: 最大高度
<!doctype html>
<html>
<head>
<title>页面标题</title>
<meta charset="utf-8">
<!-- 为了适配移动端,如果想要使用media query兼容移动端,必须添加这句话 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 为了IE9以下的浏览器兼容HTML5和CSS3 -->
<!--[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]-->
<!-- 让IE浏览器用最新的文档模式来渲染页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<!--
在1200px像素以上的视口,显示1170px 大屏幕显示器
在992px-1200px的视口上,显示970px 中等屏幕显示器
在768px-992px的视口上,显示750px pad设备
在低于768px的视口上,显示100%宽度 移动设备
@media not|only mediatype and (expressions) {
CSS 代码...;
}
min-width: 最小宽度
max-width: 最大宽度
min-height: 最小高度
max-height: 最大高度
-->
<style>
div{
border: 1px solid black;
}
/* 代表在不同的设备上呈现不同的效果 */
@media screen and (min-width: 1200px) {
.div1{
width: 1170px;
background: red;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
.div1{
width: 970px;
background: yellow;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
.div1{
width: 750px;
background: blue;
}
}
@media screen and (max-width: 768px) {
.div1{
width: 100%;
background: skyblue;
}
}
</style>
</head>
<body>
<!-- 在我们之前做第一阶段和第二阶段项目的时候,我们都是采用的固定布局 -->
<div class="div1">
在不同的设备上,呈现不同的宽度.
</div>
</body>
</html>