我有一个大小不同的 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 在全高清方面有更多空间。
这是我想要获得的结果（显然我希望它也适合其他类型的屏幕）。 预先感谢所有帮助我的人
您可以通过使用
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>