Javascript の div コンテナに自動的に適応します

Question

異なるサイズの div があります。次のような寸法にすることができます。 高さ: 780、幅: 1390、または高さ: 524、幅: 930。

React アプリケーションは 2 種類の画面に表示されます。 フル HD 1920x1080 および 4K 3840x2054。

div のサイズと画面を異なるものにして、画面内で常に同じ比率、両方のタイプの画面で同じ寸法になるようにしたいと考えています。

たとえば、タブレット、スマートフォン、1920x1200 の画面など、他の種類の画面では div を異なるものにしたいと考えています。できるだけ柔軟に対応したいと思っています。

4K では div は画面の残りの部分よりもはるかに小さく見えますが、フル HD では画面の大部分を占めます。

vh と vw を次のように使用してみました:

リーリー

このようにして、画面の種類ごとに同じ vh と vw を取得します。ただし、4k画面ではdivのスペースがフルHDの方が大きいため、うまく機能しません。

これが私が達成したい結果です (もちろん、他のタイプの画面にも適合させたいです)。 助けてくれた皆さんに事前に感謝します

Answer 1

これを実現するには、width と height、vw と vh を指定した CSS を使用します。

vw はビューポートの幅のパーセンテージを表すため、80vw は幅の 80% になります。これは vh と同じですが、高さが異なります。

リーリー リーリー