CSS实现宽高等比自适应容器的方法

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