注：未整理完
近几年整个社会发生了翻天覆地的变化，各种智能手机，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规则
第六、 如何做到图片自适应