Wie kann man das Problem der Schnittstellenfehlausrichtung lösen, die durch Höhenanpassung im adaptiven Design verursacht wird?

Lösen Sie geschickt das Problem der Höhenanpassung im adaptiven Design

Bei reaktionsschnellem Design führt die Höhenanpassung häufig zu Problemen mit der Schnittstelle zu Problemen. Insbesondere wenn die Entwurfsgröße (z. B. 1920x1080 Pixel) nicht mit der tatsächlichen visuellen Höhe des Browsers übereinstimmt, ist die Aufrechterhaltung der Integrität des Schnittstellenlayouts von entscheidender Bedeutung.

Bei der Verwendung von REM -Einheiten für das Layout beträgt die festgelegte body beispielsweise 100px, eine div -Höhe 1REM und die erwartete Höhe 100px. Die Symbolleiste oben im Browser nimmt jedoch einen Teil der Höhe ein, was dazu führt, dass die tatsächliche sichtbare Höhe geringer ist als die Entwurfstrufehöhe, und schließlich wird es eine Fehlausrichtung geben.

Eine Verbesserung ist unten vorgesehen. Der vorhandene adaptive Code wird hauptsächlich durch Anpassen body font-size der Körpers implementiert, und der Code lautet wie folgt:

 exportieren const selfadapter = () => {
  // Seiteninitialisierung für Seitengrößen, die nicht 1920*1080 auf dem Bildschirm sind, DesignSize = 1920; // Design Zeichnungsgröße lass html = document.documentElement;
  ww = html.clientwidth; // Fensterbreite let Rem = (ww * 100) / DesignSize;
  document.documentElement.style.fontSize = rem "px";

  const resize = () => {
    Lassen Sie DesignSize = 1920; // Design Zeichnungsgröße lass html = document.documentElement;
    ww = html.clientwidth; // Fensterbreite let Rem = (ww * 100) / DesignSize;
    document.documentElement.style.fontSize = rem "px";
  };

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

Dieser Code berechnet nur den rem -Wert basierend auf der Fensterbreite und ignoriert die Auswirkungen von Höhenänderungen. Der Schlüssel zur Verbesserung besteht darin, die Grundlage für die Berechnung rem -Werts an die Fensterhöhe oder die sichtbare Höhe anzupassen. Durch die Überwachung der Fensterhöhenänderungen wird der rem -Wert dynamisch eingestellt, um genauer mit der tatsächlichen sichtbaren Bereichsgröße übereinstimmen und eine Fehlausrichtung der Schnittstelle zu vermeiden. Erwägen Sie, window.innerHeight die visuelle Höhe des Browserfensters zu erhalten, und verwenden Sie es für die Berechnung der rem -Werte.

Das obige ist der detaillierte Inhalt vonWie kann man das Problem der Schnittstellenfehlausrichtung lösen, die durch Höhenanpassung im adaptiven Design verursacht wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!