CSS：如何根据屏幕/窗口大小设置宽度和高度？ [英] CSS: How to set the width and height dependent on the screen/window size?

问题描述

关注此问题此处我试图获得一个使用three.js很好地渲染浮动3D立方体。相机比例是 window.innerWidth / window.innerHeight ，因为我使用的是矩形div容器，所以我得到了一个扁平的立方体。有点像这个。

Following up this 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容器与我的屏幕或窗口大小成比例，它工作！例如，对于1367x768屏幕：

I tried to get my div container to be in proportion with my screen or window size and it worked! For example for a 1367x768 screen:

CSS：

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

但是！我希望这也适用于不同的尺寸，例如对于智能手机呢！完全响应是完美的。是否可以使宽度和高度与CSS中的屏幕尺寸完全成比例？

But! I want to have this worked out also for different size, e.g. for smartphones too! It would be perfect to make this fully responsive. Is it possible to get the width and height fully proportional to the screen size in CSS?

推荐答案

有单位显示元素依赖于屏幕：vh和vw

There are units displaying elements depending to the screen : vh and vw

vh：表示视口高度。

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

ie : height:50vh; will take 50% height of the screen ( and not of the parent element ).

vw：表示视口宽度。

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

ie : width:50vw; will take 50% width of the screen ( and not of the parent element ).

这篇关于CSS：如何根据屏幕/窗口大小设置宽度和高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！