一、设置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 我们不希望用户缩放页面