准备工作
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这个属性主要用来适配刘海屏的,