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

Question

根据这个问题 here，我正在尝试使用three.js获得一个漂浮的3D立方体的良好渲染效果。相机比例为window.innerWidth / window.innerHeight，由于我使用的是矩形div容器，因此我得到了一个扁平的立方体。就像 this。

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

CSS：

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

但是！我希望这也可以适用于不同大小的设备，例如智能手机！完全响应式将是完美的。在CSS中，是否有可能使宽度和高度与屏幕大小完全成比例？

- PLAYCUBE

Answer 1

页面上有一些元素会根据屏幕大小来显示，其中包括 vh 和 vw 这两个单位。

vh：代表视窗高度。

例如：height:50vh;表示该元素会占据屏幕高度的 50%（而不是其父元素的高度）。

vw：代表视窗宽度。

例如：width:50vw;表示该元素会占据屏幕宽度的 50%（而不是其父元素的宽度）。

- Relisora