响应式布局案例

Posted 2020-06-08

不同分辨率，显示内容不同。

@media only screen and(min-width:1024px){
.content{
Width:1000px;
Margin:auto;
}
}
@media only screen and(min-width:400px) and (max-width:1024px){
.rightBox{
Width:0;
}
.leftBox{width:30%;}
.middleBox{width:65%;}
}
@media only screen and (max-width:400px){
.leftBox, .rightBox,  middleBox{
Width:98%;
Height:200px;
}
}

可以用iscroll.js解决ios 不支持fixed的问题