媒体查询的用法？

1、设置meta标签

<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 screen  and(max-width:960px){

body{

background-color:#fff;

}

}

这段代码的意思是，当屏幕小于960px时，执行这段代码

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

body{

background-color:pink;

}

}

这段代码的意思是，当屏幕大于960px时，执行这段代码

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

body{

background-color:yellow;

}

}

这段代码的意思是，当屏幕大于960px时小于1200px时，执行这段代码