我有一個大小不同的 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 在全高清方面有更多空間。
這是我想要獲得的結果（顯然我希望它也適合其他類型的螢幕）。 預先感謝所有幫助我的人
P粉3669463802023-09-14 16:43:48
您可以透過使用 width 和 height 以及 vw 和 vh 的 css 來實現此目的。
vw 表示視窗寬度的百分比，因此 80vw 是寬度的 80%。這與 vh 相同，只是高度不同。
body { background-color: #00305e; }
.keep-prop {
background-color: #ffc700;
width: 80vw;
height: 80vh;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="keep-prop">
</div>
</body>
</html>