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

Posted 2022-12-21 明金同学

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端效果（单排显示）：