开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情
一、什么是媒体查询
媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让 CSS 可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构及用法：@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}。
媒体查询是向不同设备提供不同样式的一种不错方式，它为每种类型的用户提供了最佳的体验。作为 CSS3 规范的一部分，媒体查询扩展了 media 属性（控制您的样式应用方式）的角色。媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定 CSS 样式，媒体查询中可用于检测的媒体特性有 width 、 height 和 color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
实现步骤：
1.设置 Meta 标签
首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为 1.0，即代表不缩放）
user-scalable：用户是否可以手动缩放（默认设置为 no，因为我们不希望用户放大缩小页面）
2.加载兼容文件 js
因为 IE8 既不支持 html5 也不支持 css3 @media ，所以我们需要加载两个 js 文件，来保证我们
的代码实现兼容效果：
3.设置 IE 渲染方式默认为最高(可选)
现在有很多人的 IE 浏览器都升级到 IE9 以上了，所以这个时候就有又很多诡异的事情发生，例如现在是 IE9 的浏览器，但是浏览器的文档模式却是 IE8 为了防止这种情况，我们需要下面这段代码来让 IE 的文档渲染模式永远都是最新的
这段代码后面加了一个 chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的 IE不管是哪个版本的都可以使用 Webkit 引擎及 V8 引擎进行排版及运算，如果没有安装，就显示IE 最新的渲染模式。
