如何实现HTML同时支持横向和纵向缩放 ?

在制作网站页面时，有时候我们需要让页面同时支持横向和纵向缩放，相对横向缩放来说，纵向的缩放实现起来较为棘手。横向缩放一般用百分比宽度可以轻松搞定。那么纵向缩放该怎么实现呢 ？ 下面一起来看代码：

HTML代码：

CSS代码：

上面的 Css 代码可以看出，给Div层定义了宽度 100vw 和高度 50vh , 这是问题的关键所在。那么，这个 vw 和 vh 到底是个什么鬼呢 ？

— vw 和 vh 是 Css3 中定义的新单位。

①、vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

②、vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

尼玛 ... 一看百分比，这不就是自带缩放属性嘛。这下横向和纵向缩放需要同时支持的问题就迎刃而解了。

See the Pen horizontal-and-vertical-scaling by 墨丶水瓶 (@Nexiy) on CodePen.