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

Question

跟进这个问题here我试图使用three.js很好地渲染浮动3D立方体。相机比例是window.innerWidth / window.innerHeight，因为我使用的是矩形div容器，所以我得到了一个扁平的立方体。类似于 this。

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

CSS：

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

但是！我希望这也适用于不同的尺寸，例如对于智能手机呢！完全响应是完美的。是否可以使宽度和高度与CSS中的屏幕尺寸完全成比例？

Answer 1

有些单位根据屏幕显示元素：vh和vw

vh：表示视口高度。

ie： height:50vh;将占据屏幕高度的50％（而不是父元素的高度）。

vw：表示视口宽度。

ie： width:50vw;将占据屏幕宽度的50％（而不是父元素的宽度）。