什么是媒体查询？

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》如何做到图片自适应