CSS: 如何根据screen/window尺寸设置宽高？

Question

跟进这个问题 here I am trying to get a good rendering of a floating 3D cube using three.js. The camera proportions are window.innerWidth / window.innerHeight and since I am using a rectangular div container, I get a flattened cube. Something like this。

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

CSS:

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

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

Answer 1

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

vh : 表示视口高度。

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

vw :表示视口宽度。

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

CSS: 如何根据screen/window尺寸设置宽高？

CSS: How to set the width and height dependent on the screen/window size?

html

javascript

css

screen-size

twitter-bootstrap