pc端不设置<meta name="viewport" content="width=device-width”, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">时 在移动端视口宽度等比缩放 显示内容根据 html 或body设置min-width的宽度显示的内容显示
否则布局视口的宽度等于当前设备视口的宽度
一般不设置body内的元素的宽度 /设置宽度也不大于外层宽度
一般给某个父元素设置overflow-x:hidden 当子元素无意间超出父元素宽度时 隐藏x轴滚动条
@media(max-width: 1560px) {
.box{
width: 1100px;当屏幕小于1560时 box1100 在小于1100时 x轴滚动条出现
}
}
@media(min-width: 1560px) {
.box{
width: 1550px;//减去滚动条宽度 当屏幕宽度1560时 宽度也设置1560那么由于y轴滚动条存在 x轴宽度不足 导致出现滚动条
}
}
网友评论