方案一:CSS3 vw 单位
CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位，1vw = 1% viewport width，vh是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin是相对当前视口宽高中较小的一个的百分比单位，同理 vmax是相对当前视口宽高中较大的一个的百分比单位。
1 #square{ 2 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 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 30%; 3 background:red; 4 overflow:hidden; 5 max-200px; 6 } 7 #square:after{ 8 content: ''; 9 display: block; 10 margin-top:100%; 11 }
若使用垂直方向上的padding撑开父元素，则不需要触发BFC。
1 #square{ 2 30%; 3 background:red; 4 max-200px; 5 } 6 #square:after{ 7 content: ''; 8 display: block; 9 padding-top:100%; 10 }