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

Question

在这里跟进这个问题我试图使用three.js获得漂浮的3D立方体的良好渲染.相机比例是window.innerWidth / window.innerHeight,因为我使用矩形div容器,我得到一个扁平的立方体.像这样的东西.

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

CSS:

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

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

Answer 1

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

vh:表示视口高度.

即: height:50vh;将占据屏幕高度的50%(而不是父元素的高度).

vw:表示视口宽度.

即: width:50vw;将占据屏幕宽度的50%(而不是父元素的宽度).