媒体查询media参数以及其兼容性问题

一、设置meta标签

在使用媒体查询media之前我们需要先设置meta标签，对设备的缩放等参数进行设定。

1. <!--设置缩放和绘制-->
2. <meta name="viewport" content="width=device-width, initial-scale=1,minmum-scale=1,maxmum-scale=1,user-scalable=no">

参数解释：

width=device-width   宽度等于当前设备宽度

initial-scale=1初始缩放比例，默认为1

minmum-scale=1允许用户缩放到的最小比例，默认为1

maxmum-scale=1允许用户缩放到的最大比例，默认为1

user-scalabel=no用户是否可以手动缩放，默认设置为no 我们不希望用户缩放页面

 

二、加载IE兼容文件

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

1. <!--加载meta IE兼容文件-->
2. <!--[if lt IE 9]>
3. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
4. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
5. <![endif]-->

三、设置IE默认渲染方式

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

解决办法：

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

这句话的意思是将IE浏览器默认的渲染方式设为电脑上所装IE浏览器的最高标准，比如我电脑上装了IE10和IE8两个浏览器，如果我用IE8浏览器打开这个页面，会以IE10 的标准来渲染页面。

如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。

 

四、media 参数

• width:浏览器可视宽度。

• height:浏览器可视高度。

• device-width:设备屏幕的宽度。

• device-height:设备屏幕的高度。

• orientation:检测设备目前处于横向还是纵向状态。

• aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

• device-aspect-ratio:检测设备的宽度和高度的比例。

• color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）

• color-index:检查设备颜色索引表中的颜色，他的值不能是负数。

• monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）

• resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

• grid：检测输出的设备是网格的还是位图设备。