这是一个在面试中被问到的问题：「移动开发中面对不同宽度的设备，如何设置一个宽度为 100% 的元素的高度，使这个元素的宽高比保持不变？」这个问题的正确答案是使用
vw
单位设置元素的高度，那么
vw
表示什么呢？
1
vw
、
vh
介绍
vw
、
vh
两个单位是 CSS3 中新增的两个单位，可以看作是对
%
单位的扩展。我们知道
%
是相对于包含块计算宽度或高度，而
vw
、
vh
则是相对于视口（viewport）的宽度或高度来计算当前元素的宽度或高度。
vw
、
vh
分别是 viewport width、viewport height 的缩写。
1vw
代表当前视口宽度的 1%，
1vh
代表当前视口高度的 1%。我们可以很容易的实现将整个视口高度四等分，当然，这个效果使用
%
也可以非常方便的实现。
另一方面，
vw
、
vh
这两个单位并没有想象中那么好用，因为是相对 viewport 计算长度，所以滚动条的宽度会对排版造成影响。例如我们希望将视口宽度四等分，如果将 div 宽度设置为
25vw
并设置左浮动，如果 div 内容高度超出屏幕导致出现滚动条，那么最后一个 div 将被移动到第二行。
2 使用
vw
实现高度等比例自适应宽度
了解了
vw
、
vh
两个单位含义，文章开头的问题也就迎刃而解了，只需要将元素的宽度设置为
100%
，高度则使用
vw
进行定义。如定义为
50vw
，那么不管适配多少宽度的设备，元素的宽高比将始终保持 2:1。（如果存在滚动条，则实际宽高比会略大于 2:1）下图展示了元素高度如何随宽度变化。
