1.什么是媒体查询，如何理解？
就是根据不同的屏幕或设备，自适应布局。一套代码，多个设备应用，合理布局。
2.使用：如何实现一个网站的响应式设计？
1》meta标签
在网页的头部添加这行代码
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
其中：width=device- 网页宽度等于设备宽度
initial-scale = 1.0：初始缩放比例是1.0。网页初始页面的大小占整个面积的100%
maxmum-scale = 1.0 ：最大缩放比例为1.0
user-scalable：用于是否可以手动缩放
2》兼容性问题：
因为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]-->
3》设定渲染方式
有时候可能会遇到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以最高的文档模式展现效果。
4》建议使用单位：
rem ,em ，%
rem的设置：
5》如何编写媒体查询代码
6》如何使用@media规则 https://www.jianshu.com/p/516c47ef9ac0
7》如何做到图片自适应