HTML布局:
<div id="one">
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
</div>
CSS代码:
设置视口:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
PC端:
/* pc */
@media only screen and (min-width: 600px) {
.aa{
width: calc(94%/4);
margin-left: 2%;
height: 200px;
margin-top: 10px;
}
.aa:nth-child(4n+1){
margin-left: 0;
}
}
iPad端:
/*ipad*/
@media only screen and (min-width: 300px) and (max-width: 600px) {
.aa{
width: calc(98%/2);
margin-left: 2%;
height: 200px;
margin-top: 10px;
}
.aa:nth-child(2n+1){
margin-left: 0;
}
}
手机端:
/*phone*/
@media only screen and (min-width: 0px) and (max-width: 300px) {
.aa{
width: 100%;
margin-left: 0;
height: 200px;
margin-top: 10px;
}
}