2021-07-29 實作一個自适應正方形

1、padding-top+position

.box{
    width:50%;
    padding-bottom:50%;
}
           

position：relative

position-top:100%，就可以得到一個正方形的盒子

有時width不是100%，比如width：20%，這時，使得padding-top：20%，就可以。

即（padding-top/width = 1）就是正方形。

(padding-top/width=1/2)就是二比一的長方形

2、視窗機關

視窗是浏覽器實際顯示内容的區域，即不包括工具欄和按鈕的網頁浏覽器。機關是vw、vh，但是考慮相容性，不推薦

.box{
    width:50vw;
    height:50vw;
}