[英]CSS: How to set the width and height dependent on the screen/window size?
Following up this question here I am trying to get a good rendering of a floating 3D cube using three.js. 在这里跟进这个问题,我试图使用three.js很好地呈现浮动3D立方体。 The camera proportions are
window.innerWidth / window.innerHeight
and since I am using a rectangular div container, I get a flattened cube. 相机比例为
window.innerWidth / window.innerHeight
,由于我使用的是矩形div容器,因此得到了一个扁平的立方体。 Something like this . 像这样的东西。
I tried to get my div container to be in proportion with my screen or window size and it worked! 我试图使我的div容器与我的屏幕或窗口大小成比例,并且可以正常工作! For example for a 1367x768 screen:
例如,对于1367x768屏幕:
CSS: CSS:
#render {
width: 450px;
height: 250px;
}
But! 但! I want to have this worked out also for different size, eg 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?
是否有可能使宽度和高度与CSS中的屏幕尺寸完全成比例?
There are units displaying elements depending to the screen : vh and vw 根据屏幕的不同,有些单元显示元素:vh和vw
vh : means viewport height. vh:视口高度。
ie : height:50vh;
即:
height:50vh;
will take 50% height of the screen ( and not of the parent element ). 将占据屏幕高度的50%(而不是父元素的高度)。
vw : means viewport width. vw:表示视口宽度。
ie : width:50vw;
即:
width:50vw;
will take 50% width of the screen ( and not of the parent element ). 将占据屏幕宽度的50%(而不是父元素的宽度)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.