宽度减小时增加高度（高度反转 Vw）答案

【问题标题】：Increase height as width decreases(Reverse Vw for height)宽度减小时增加高度（高度反转 Vw）
【发布时间】：2016-07-12 19:36:32
【问题描述】：

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

    width: 100%;
    height: 29vw;

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

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

实现它的主要方法是使用 CSS 媒体查询（非常流行）。如果您正在寻找一种无需媒体查询的替代方法，请使用以下方法：

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

例子：

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

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

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

*viewport = 浏览器窗口大小。

来源：w3schools

【讨论】：