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

    <div style="width:100px;">
   <div class="z"><!-- 此处有无内容亦会影响 --></div>
    </div>     

以下为几种解决方案：

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;   
    }