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：意味着视口HIGHT。

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

vw：表示视口宽度。

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