CSS:如何根据屏幕/窗口大小设置宽度和高度？

Question

在这个问题之后，这里，我试图获得一个良好的渲染浮动三维立方体使用three.js。相机的比例是window.innerWidth / window.innerHeight，因为我使用的是矩形div容器，所以我得到了一个扁平的立方体。有点像这。

我试着让我的div容器与我的屏幕或窗口大小成比例，它起作用了！例如，对于1367x768屏幕：

CSS:

#render {
    width: 450px;
    height: 250px;
}

但!我想让这也解决不同的大小，例如，智能手机！这将是完美的，使这种充分的反应。是否有可能获得宽度和高度完全成比例的屏幕大小在CSS？

Answer 1

有一些单元根据屏幕显示元素: vh和vw。

vh :表示视口高度。

ie：height:50vh;将占用屏幕50%的高度(而不是父元素的高度)。

vw :表示视口宽度。

ie：width:50vw;将占用50%的屏幕宽度(而不是父元素的宽度)。