Wie löst ich das Höhenproblem, indem Sie die REM -Einheit in adaptivem Design einstellen?

Adaptives Design: Lösen Sie geschickt das Problem der Höhenanpassung

Bei reaktionsschnellem Design ist die genaue Kontrolle der Seitenelemente der Höhe häufig Kopfschmerzen. Insbesondere wenn die Symbolleiste oben im Browser Platz einnimmt, was dazu führt, dass die tatsächliche sichtbare Höhe geringer ist als die Entwurfsentwurfhöhe, ist die Gewährleistung der Höhe der Seitenelemente im Einklang mit dem Designentwurf zu einer großen Herausforderung für Entwickler.

Nehmen wir an, dass die Entwurfsentwurfgröße 1920x1080 Pixel beträgt, aber die Existenz der Browser -Symbolleiste macht die tatsächliche visuelle Höhe von weniger als 1080 Pixel. Wenn Sie REM-Einheiten direkt verwenden und body font-size der Körpers gemäß der Breite des Designentwurfs festlegen, ist das Seitenlayout wahrscheinlich voreingenommen.

Möglicherweise haben Sie das REM -Schema auf der Grundlage der Breitenanpassung ausprobiert:

 exportieren const selfadapter = () => {
  Lassen Sie Designwidth = 1920; // Entwurf der Entwurfsbreite lass html = document.documentElement;
  ww = html.clientwidth; // Fensterbreite let Rem = (ww * 100) / Designwidth;
  html.style.fontSize = rem "px";

  const resize = () => {
    Sei rem = (ww * 100) / designwidth;
    html.style.fontSize = rem "px";
  };

  window.adDeVentListener ("Größen Sie die Größe", Größe, falsch);
};

Dieses Schema berechnet den REM -Wert basierend auf der Fensterbreite und ignoriert die Höhenänderung. Um Höhenunterschiede durch die Browser -Symbolleiste zu beheben, besteht eine effektivere Strategie darin, den REM -Wert basierend auf der visuellen Fensterhöhe zu berechnen.

Der geänderte Code lautet wie folgt:

 exportieren const selfadapter = () => {
  DesignHeight = 1080; // Entwurf der Entwurfshöhe lass html = document.documentElement;
  wh = html.clientHeight; // Fensterhöhe let Rem = (WH * 100) / DesignHeight;
  html.style.fontSize = rem "px";

  const resize = () => {
    Sei Rem = (WH * 100) / DesignHeight;
    html.style.fontSize = rem "px";
  };

  window.adDeVentListener ("Größen Sie die Größe", Größe, falsch);
};

Durch die Verwendung clientHeight , um die visuelle Höhe des Fensters zu erhalten und den REM -Wert basierend auf der Entwurfstrafthöhe zu berechnen, kann die durch die Browser -Symbolleiste verursachte Seitenhöhenabweichung effektiv gelöst werden, um sicherzustellen, dass die Höhe des Seitenelements mit dem Entwurfsentwurf übereinstimmt, und die Meldung von UI zu vermeiden. Dadurch können 100px im Designentwurf im Browser genau in 1Rem umgewandelt werden.

Das obige ist der detaillierte Inhalt vonWie löst ich das Höhenproblem, indem Sie die REM -Einheit in adaptivem Design einstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!