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