在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。
于是我们就需要实现一个 宽度自适应，高度为宽度一半的容器 。
这里先以高度为宽度一半为例，也可以是其他任意比例 。
一、思考如何实现
这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。
我们可以借助这个想法，根据元素高度，来为元素设置一个相应比例的高度即可。
二、实现方法1 – 通过 vw 视口单位实现
所谓 视口单
