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

喜夏-厌秋 提交于 2019-12-06 03:43:09

问题


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.

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;
}

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?


回答1:


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

vh : means viewport height.

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

vw : means viewport width.

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



来源:https://stackoverflow.com/questions/38789139/css-how-to-set-the-width-and-height-dependent-on-the-screen-window-size

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!