多媒体查询语法

多媒体查询语法

1.设置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）

③ minimum-scale：允许用户缩放到的最小比例（默认设1.0）   

④maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   

⑤user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面） 

2.加载兼容文件JS

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

<!--[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]-->

3.设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

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

4.进入CSS3 Media写法

我们先来看下下面这段代码：

@media screen and (max-width: 960px){  

  body{        background: #000;    }

}

width:浏览器可视宽度。height:浏览器可视高度。device-width:设备屏幕的宽度。device-height:设备屏幕的高度。