简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
自动适应 Javascript 中的 div 容器
P粉806834059
P粉806834059 2023-09-13 19:20:46
0
1
531

我有一个大小不同的 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粉806834059
P粉806834059

全部回复(1)
P粉366946380
P粉3669463802023-09-14 16:43:48 1 楼

您可以通过使用 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>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！