方案一:CSS3 vw 單位
CSS3 中新增了一組相對於可視區域百分比的長度單位vw、vh、vmin、vmax。其中vw是相對於視口寬度百分比的單位，1vw = 1% viewport width，vh是相對於視口高度百分比的單位，1vh = 1% viewport height；vmin是相對當前視口寬高中較小的一個的百分比單位，同理 vmax是相對當前視口寬高中較大的一個的百分比單位。
1 #square{ 2 width:30%; 3 height:30vw; 4 background:red; 5 }
辦公資源網址導航 https://www.wode007.com
類比：純CSS實現自適應瀏覽器高度的正方形只需要設置width的單位為vh即可。
優點：簡潔方便。
缺點：瀏覽器兼容不好。
方案二：設置垂直方向的padding撐開容器
由於margin, padding 的百分比數值是相對父元素的寬度計算的，只需將元素垂直方向的一個padding值設定為與width相同的百分比就可以制作出自適應正方形了。
但要注意，僅僅設置padding-bottom是不夠的，若向容器添加內容，內容會占據一定高度，為了解決這個問題，需要設置height: 0。
1 #square{ 2 width:30%; 3 height:0; 4 padding-bottom: 30%; 5 background:red; 6 }
優點：簡潔明了，且兼容性好。
缺點：會導致在元素上設置的max-width屬性失效（max-height不收縮）。
方案三：利用偽元素的 margin(padding)-top 撐開容器
max-width屬性失效的原因是：max-width屬性只限制於width，也就是只會對元素的 content width起作用。
解決方法是：用一個子元素撐開content部分的高度，從而使max-height屬性生效。
首先需要設置偽元素，其內容為空，margin-top設置為100%。
但要注意，若使用垂直方向上的margin撐開父元素，僅僅設置偽元素是不夠的，這涉及到margin collapse外邊距合並的概念，由於容器與偽元素在垂直方向發生了外邊距合並，所以撐開父元素高度並沒有出現，解決方法是在父元素上觸發BFC：設置overflow:hidden。
1 #square{ 2 width:30%; 3 background:red; 4 overflow:hidden; 5 max-width:200px; 6 } 7 #square:after{ 8 content: ''; 9 display: block; 10 margin-top:100%; 11 }
若使用垂直方向上的padding撐開父元素，則不需要觸發BFC。
1 #square{ 2 width:30%; 3 background:red; 4 max-width:200px; 5 } 6 #square:after{ 7 content: ''; 8 display: block; 9 padding-top:100%; 10 }