纯CSS宽度高度自适应正方形布局（pc端、手机端通用）

1、css样式代码

ul{
	overflow:hidden;
}
ul li{
	float:left;
	width:50%;
}

//这是关键代码
.out_wapper{
	position:relative;
	height:0;
	padding-top:100%;
}
.out_wapper .square{
	border:1px solid #dddddd;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-align:center;
}

2、html代码

	

		

		    

		        
这是一个宽高自适应的正方形
		    
		
	
	

		

		    

		        
这是一个宽高自适应的正方形
		    
		
	

（编写高质量代码，一个专业致力于页面转化，切图的前端爱好者~~）