一、设置meta标签
在使用媒体查询media之前我们需要先设置meta标签,对设备的缩放等参数进行设定。
- <!--设置缩放和绘制-->
- <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文件,来保证我们的代码实现兼容效果:
- <!--加载meta IE兼容文件-->
- <!--[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>
- <![endif]-->
三、设置IE默认渲染方式
现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8:
解决办法:
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
如果有的用户电脑里面装了这个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:检测输出的设备是网格的还是位图设备。
-