CSS最大正方形

之前听朋友说一家公司的一道前端面试题： 用纯CSS画一个浏览器中的最大正方形。自己尝试写了一下

HTML代码：

		
"container">
			
"box">
 
		
	

CSS代码：

body{
     
	margin: 0;
	padding: 0;
}
.container{
     
	width: 100%;
	height: 100%;
	position: relative;
}
.container .box{
     
	position: absolute;
	width: 100vmax;
	height: 100vmax;
	background-color: #000000;
}

感觉这道题比较坑的地方是正方形的大小要适应屏幕，如果是电脑这种宽度大于高度的屏幕，高度要和最大宽度保持一致；如果是像手机这种宽度小于高度的屏幕，宽度要和最大高度保持一致。所以我选择了vmax单位，它会获取当前vw和vh中较大的一个值，从而实现盒子大小在横竖屏下保持最大。