经过搜索查找，总结几种常用的css自适应的正方形的解决方案： html代码：

以下为几种解决方案：

1. 利用padding-bottom:100%撑开，如果无内容可不设置height:0;这一项，如果有内容的情况下还想保持为正方形，则需要设置height:0;

.z{        width: 100%;        padding-bottom: 100%;        border: 1px solid red;        height: 0;        }

1. 利用after伪类,先存在问题是，如果加入内容则高度会被撑开，而设置height:0并不能解决这一问题，有待研究，如果大家有好的方案，可以留言

.z {    width: 100%;    border: 1px solid red;   }     .z:after {    content: '';    display: block;    margin-top: 100%;   }

1. 利用padding:50% 0;原理和padding-bottom:100%大致相似，但是此处如果有内容则是从div的一半处开始。

.z {        width: 100%;        padding: 50% 0;        border: 1px solid red;        height: 0;      }

1. 网上搜罗的一个方法，利用vm,代码如下，不过本人木有实现成功，欢迎大家留言已实现成功的demo。并且这个方法兼容性目前来说还较差。所以放在最后一个，不太推荐，不过还是很好奇，这个东西是怎么实现的。

.z {        width: 100%;        height: 100vm;        border: 1px solid red;       }