HTML多端适应 响应式布局案例

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;
	}
}

 

PC端效果（呈4排显示）：

iPad端效果（双排显示）：

Android端效果（单排显示）：