我有一個大小不同的 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 在全高清方面有更多空間。

這是我想要獲得的結果（顯然我希望它也適合其他類型的螢幕）。 預先感謝所有幫助我的人