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

Question

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

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

CSS:

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

但是!我也想针对不同的尺寸进行计算，例如也适用于智能手机!让它完全响应将是完美的。是否可以在 CSS 中获得与屏幕尺寸完全成比例的宽度和高度？

Answer 1

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

vh : 表示视口(viewport)高度。

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

vw : 表示视口(viewport)宽度。

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