媒体查询是什么？我们为什么要用媒体查询

注：未整理完

近几年整个社会发生了翻天覆地的变化，各种智能手机，pad，之类的移动端设备随处可见。那么，程序员界就刮起了一阵风暴，大家在思考 “ 如何让我们的网站在各种移动端设备上都能布局合理呢？ ”为每一个设备写一套代码自然是非常麻烦的。那么，聪明的程序员们想到了一个办法，“ 我只要一套代码，就能让我的网站在不同大小的设备上正确显示 ”。于是，响应式设计模型诞生啦！其核心就是“媒体查询”技术。

接下来，让我们了解一下，如何实现一个网站的响应式设计

第一、 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 ： 初始缩放比例为1.0 。网页初始页面的大小占整个面积的100%

maximum-scale=1.0 ： 最大缩放比例为1.0 ，

user-scalable ： 用户是否可以手动缩放

第二、 加载ie浏览器的兼容性文件

因为IE9，IE6、7、8不支持媒体查询，所以必须加载以下文件

<!--[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>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

 

第三、 设定渲染方式

有时候会遇到一个很诡异的问题：为什么我的IE浏览器都升级到IE9以上了，但是浏览器的文档模式却是IE8

怎么解决这个问题呢？

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这句话可以保证让IE的文档模式永远都是最新的

还有一种更高级的写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

什么意思呢？

怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。

第四、 使用单位

使用百分比，em， rem

第四、 怎样编写媒体查询代码

第五、 怎样引入@media规则

第六、 如何做到图片自适应