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

【问题标题】：CSS: How to set the width and height dependent on the screen/window size?CSS：如何根据屏幕/窗口大小设置宽度和高度？
【发布时间】：2016-12-11 20:43:37
【问题描述】：

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

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

CSS：

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

但是！我也想为不同的大小解决这个问题，例如也适用于智能手机！让它完全响应是完美的。是否可以在 CSS 中获得与屏幕尺寸完全成比例的宽度和高度？

【问题讨论】：

标签： javascript html css twitter-bootstrap screen-size

【解决方案1】：

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

vh : 表示视口高度。

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

vw : 表示视口宽度。

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

【讨论】：