准备工作
1、设置@media标签
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-
width = device-width:宽度等于当前设备的宽度
-
height = device-height:高度等于当前设备的高度
-
initial-scale:初始的缩放比例(默认设置为1.0)
-
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
-
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
-
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
-
viewport-fit这个属性主要用来适配刘海屏的,
2、加载兼容JS文件
因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5sh