CSS3 媒介查询

一、 响应式设计

响应式设计，设计可根据所显示的设备屏幕大小（视口宽度）而自动调节改变, 在不同的设备上呈现的会有所不同。按照可用的屏幕属性，响应式设计提供了 UI 的最佳效果。

例如，如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏，那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的，在较小的 智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上，侧边栏很可能不再是可用的 UI 组件。

有了媒体查询，我们就可以对所有可能的不同设备编写精准css代码，这样，UI设计就能根据设备的视口宽度自动的更样式，提供不同屏幕大小下的最佳 UI 体验。

---

二、媒介查询

2-1. 什么是媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

---

2-2. 为什么响应式设计需要，媒体查询

通过媒介查询就能针对不同的设备特性（视口的宽度）设置特定的CSS样式规则。

---

2-3. 如何在CSS文件中引入媒体查询

媒介查询 写在CSS样式代码的最后，CSS中文名称即层叠样式表，即在同一特性下，靠后的的样式规则会覆盖掉前面的样式规则。

---

设置Meta标签

首先需要在html文档中添加以下代码，用来兼容移动设备的显示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width: 宽度等于当前设备的宽度

initial-scale=1： 初始的缩放比例（默认为1）

maximum-scale=1： 允许用户缩放到得最大比例（默认为1）

user-scalable=no： 用户不能手动缩放

加载兼容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]-->

设置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媒体查询

例:

@media screen and (max-width:720px) and (min-width:320px){
    body{
       background-color: #CCCCCC;
    }
}
@media screen and (max-width:320px){
      body{
         background-color: #FFFFFF;
       }
}

上面代码的意思是，当屏幕宽度在320px~720px之间时，媒体查询中body的背景色（background-color: #CCCCCC;）, 这个背景色的设置优先级高于之前的。当屏幕宽度在小于320px时，媒体查询中body的body背景色（background-color: #FFFFFF;）会重叠之前的body背景色.

---

推荐阅读：

1. 菜鸟教程：CSS3 @media 查询
2. 使用 CSS 媒体查询创建响应式网站
3. 使用 CSS 媒体查询创建响应式网站