suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Automatische Anpassung an Div-Container in Javascript

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粉806834059P粉806834059436 Tage vor633

Antworte allen(1)Ich werde antworten

  • P粉366946380

    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>

    Antwort
    0
  • StornierenAntwort