简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Automatische Anpassung an Div-Container in Javascript
P粉806834059
P粉806834059 2023-09-13 19:20:46
0
1
532

Ich habe eine Div mit verschiedenen Größen. Es kann folgende Abmessungen haben: Höhe: 780, Breite: 1390 oder Höhe: 524, Breite: 930.

React-Anwendungen werden auf zwei Arten von Bildschirmen angezeigt: Full HD 1920 x 1080 und 4K 3840 x 2054.

Ich möchte, dass das Div unterschiedliche Größen und Bildschirme hat, damit es immer die gleichen Proportionen im Bildschirm und die gleichen Abmessungen in beiden Bildschirmtypen hat.

Zum Beispiel möchte ich, dass das Div auf anderen Bildschirmtypen, wie Tablets, Smartphones oder 1920x1200-Bildschirmen, anders ist. Ich möchte es so flexibel wie möglich gestalten.

In 4K sieht das Div viel kleiner aus als der Rest des Bildschirms, während es in Full HD den größten Teil des Bildschirms einnimmt.

Ich habe versucht, vh und vw wie folgt zu verwenden: 

function convertPxToVH(px) {
    var vh = (px / 1080) * 100;
    return vh;
  }

  function convertPxToVW(px) {
    var vw = (px / 1920) * 100;
    return vw;
  }

Auf diese Weise erhalte ich für jeden Bildschirmtyp das gleiche VH und VW. Aber es funktioniert nicht gut, da das Div im 4K-Bildschirm in Full HD mehr Platz hat.

Das ist das Ergebnis, das ich erreichen möchte (natürlich möchte ich, dass es auch auf anderen Bildschirmtypen funktioniert). Vielen Dank im Voraus an alle, die mir helfen

P粉806834059
P粉806834059

Antworte allen(1)
P粉366946380
P粉3669463802023-09-14 16:43:48 1 Etage

您可以通过使用 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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！