怎么做一个自适应的正方形

现在的网页，因为终端产品种类繁多，所以网页自适应已经成了基本要求。
排版的时候，怎么做到自适应的正方形呢。
最初的方法，或是直接写宽度=高度，但是不会随着屏幕自动改变大小。

width:100px;
height:100px;
background:pink;

第二种方法可以用到vw这个单位，表示屏幕宽度，或者vh，表示屏幕高度，数值范围从1—100，表示1%—100%；

width:10vw;
height:10vw;
background:pink;

上面单位也可以写成vh。

第三种方法可以先设置宽度的百分比width:20%，将高度设置为0，然后padding-bottom：20%；可以有同样的效果。

width:20%;
height:0;
padding-bottom:20%;
background:pink;

这里的padding-bottom能不能改成padding-top呢，试一下就知道了，如果改成padding-top，正方形里面的内容会在上方，这是由内容本身的特性决定的。所以这里不能混用，还是老实用padding-bottom好了。