纯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代码

<ul>
	<li>
		<div class="out_wapper">
		    <div class="border-eaeaee font0 pos-a left0 top0 per100 ht100p tc">
		        <p>这是一个宽高自适应的正方形</p>
		    </div>
		</div>
	</li>
	<li>
		<div class="out_wapper">
		    <div class="border-eaeaee font0 pos-a left0 top0 per100 ht100p tc">
		        <p>这是一个宽高自适应的正方形</p>
		    </div>
		</div>
	</li>
</ul>
（编写高质量代码，一个专业致力于页面转化，切图的前端爱好者~~）