宽度减小时增加高度（高度反向Vw）

Question

我一直试图在宽度减小时增加div的高度。这允许所有文本更好地适应而不流出。没有js可以实现这个目标吗？

    width: 100%;
    height: 29vw;

当宽度减小时，Vw会降低高度。（我需要完全相反的行为。宽度向下 - 高度上升）我尝试使用负向vw来反转效果而没有运气。

谢谢！

Answer 1

这样做的主要方法是使用CSS媒体查询（非常受欢迎）。如果你正在寻找一种没有媒体查询的替代方案，那么它就是：

vw在小屏幕上变大，而calc(Xpx - Xvw)在小屏幕上变小。

示例：

div {
  width: 40vw;
  height: calc(400px - 20vw);
  background: tomato;
}

jsfiddle DEMO

或者，您可以使用与视口大小相关的其他3个单元：vh vmin和vmax。

  

vw - 相对于视口宽度的1％*;
   vh - 相对于视口高度的1％*;
   vmin - 相对于视口的*较小尺寸的1％;
   vmax - 相对于视口的*较大尺寸的1％;

     

* viewport =浏览器窗口大小。

     

来源：w3schools