1.Media Query的使用方法
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
参数解释:
- width = device-width:宽度等于当前设备的宽度
- initial-scale:初始的缩放比例(默认设置为1.0)
- minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
- maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
- user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
使用:
@media 设备类型 and (设备特性){样式代码}
2