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

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

本文关键字：设置 高度 窗口大小 何根 屏幕 CSS      更新时间：2023-09-26

根据这个问题，我正在尝试使用three.js对浮动的3D立方体进行良好的渲染。相机比例为window.innerWidth / window.innerHeight，由于我使用的是矩形div容器，所以我得到了一个扁平的立方体。像这样的东西。

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

CSS:

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

但是！我也想为不同的尺寸做这个，例如智能手机！这将是完美的，使它完全响应。有可能在CSS中获得与屏幕大小完全成比例的宽度和高度吗？

根据屏幕的不同，有显示元素的单元：vh和vw

vh:表示视口高度。

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

vw:表示视口宽度。

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

相关文章：