自動適應 Javascript 中的 div 容器
我有一個大小不同的 div。它可以具有以下尺寸： 高度：780，寬度：1390，或高度：524，寬度：930。
React 應用程式顯示在兩種類型的螢幕上： 全高清 1920x1080 和 4K 3840x2054。
我希望 div 的大小和螢幕不同，以便始終在螢幕中保持相同的比例，並且在兩種類型的螢幕中保持相同的尺寸。
例如，我希望 div 在其他類型的螢幕上也有所不同，例如平板電腦、智慧型手機或 1920x1200 螢幕。我想讓它盡可能靈活。
在 4K 下，div 看起來比螢幕的其餘部分小得多，而在全高清下，它佔據了螢幕的大部分。
我嘗試以以下方式使用 vh 和 vw：
function convertPxToVH(px) {
var vh = (px / 1080) * 100;
return vh;
}
function convertPxToVW(px) {
var vw = (px / 1920) * 100;
return vw;
}
透過這種方式，我將為每種類型的螢幕獲得相同的 vh 和 vw。但效果不佳，因為在 4k 螢幕中，div 在全高清方面有更多空間。
這是我想要獲得的結果（顯然我希望它也適合其他類型的螢幕）。 預先感謝所有幫助我的人
