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时,执行这段代码