CSS：画面/ウィンドウのサイズに応じて幅と高さを設定する方法は？

Question

この質問をフォローアップhere私はthree.jsを使用して浮動3Dキューブの良いレンダリングをしようとしています。カメラの比率はwindow.innerWidth/window.innerHeightです。私は長方形のdivコンテナを使用しているので、私は平坦な立方体を取得します。 thisのようなものです。

私のdivコンテナを自分の画面やウィンドウのサイズに比例させるようにしてみました。たとえば、1367x768の画面用：

CSS：

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

しかし！私はこれを別のサイズでも有効にしたいと思っています。スマートフォン用にも！これを完全に敏感にすることは完璧です。 CSSの画面サイズに完全に比例した幅と高さを得ることは可能ですか？

Answer 1

は画面に応じ要素表示ユニットがある：VHおよびVWを

VH：がビューポートハイトを意味します。

つまり：height:50vh;は、画面の高さが50％（親要素ではない）になります。

vw：はビューポートの幅を意味します。

例：width:50vw;は、画面の幅が50％（親要素ではない）になります。