css自適應正方形的方案

1. 通過搜索查找，總結幾種經常使用的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;   
       }