用css 实现一个正方形布局

square.css

/*实现一个响应式的正方形布局，第一反应*/

.container{
	width:100%;
  	height:100vw;
}

/*

不过这货兼容性...只能说还行

Viewport units: vw, vh, vmin, vmax ✔ 76.03% ◒ 7.57%
  IE ✘ 5.5+ ◒ 9+¹ ◒ 10+² Edge ◒ ² Firefox ✘ 2+ ✔ 19+ Chrome ✘ 4+ ◒ 20+² ✔ 26+ Safari ✘ 3.1+ ◒ 6+² ✔ 6.1+ Opera ✘ 9+ ✔ 15+ 
简单解释：IE 近代浏览器支持，chrome/ff/safari 支持比较好，opera 不支持，Android/ios 主流支持比较好

来个兼容性好的思路。padding-bottom/margin-bottom 两个不错。当然你的 box-sizing:content-box;
*/

.container{
	width: 100%;
	padding-bottom: 100%;
  	height:0;
}

/*里面前两个比较容易理解，height0的意识是，我没高度，内容就不要撑破我了。还有一个隐含的问题就是 max-height 没法用了，响应性受到了限制，margin的方案可以试一下*/

.container{
	width:100%;
}
.container:after{
	content:'';
  	display:block;
	margin-top:100%;
}

/*这种方案比较好，兼容性也好，可以放心的作为 vw 的替代方案了*/