So verwenden Sie vw+rem für das mobile Layout

Verwenden Sie immer noch das flexible Rem-Layout? Ist es Ihnen unangenehm, einen großen Abschnitt komprimierten JS-Code in den Header der HTML-Datei einzufügen? Erfahren Sie mehr über vw, das Ihren Code reiner machen kann

Stellen Sie kurz das REM-Layoutschema vor

rem ist eine Längeneinheit in CSS, 1rem = Schriftgrößenwert des Stammelements html. Wenn alle Elemente auf der Seite REM-Einheiten verwenden, müssen Sie nur den Schriftgrößenwert des Stammelements ändern und alle Elemente werden proportional vergrößert oder verkleinert. Daher müssen wir nur ein kleines Stück JS-Code schreiben, um den Schriftgrößenwert des HTML entsprechend der Bildschirmbreite zu ändern und so ein flexibles Layout zu erreichen. Diese Methode ist in der Tat praktisch und weist eine gute Kompatibilität auf. Sie ist derzeit eine sehr gängige Lösung für elastisches Layout. Diese Lösung hat jedoch Nachteile (Nachteil 1: Sie ist stark an den Schriftgrößenwert des Stammelements gekoppelt, was zu Layoutstörungen führt, wenn die Systemschriftart vergrößert oder verkleinert wird; Nachteil 2: Ein Stück JS-Code muss in den Header der HTML-Datei eingefügt werden). Dieser Artikel stellt eine bessere und reinere Lösung vor.

VW-Sparte realisiert flexibles Layout

Schauen wir uns zunächst die offizielle Erklärung der vw vh-Einheiten w3c an vw: 1 % der Breite des Ansichtsfensters vh: 1 % der Höhe des Ansichtsfensters

Viewport ist die Größe des sichtbaren Bereichs des Browsers. Wir können es so verstehen: 100vw = window.innerwidth, 100vh = window.innerheight. Auf mobilen Geräten können wir im Allgemeinen davon ausgehen, dass 100vw die Bildschirmbreite ist. Wenn Sie vw layout verwenden, müssen Sie die Schriftgröße des Stammelements in js nicht dynamisch festlegen wie bei rem. Sie müssen diese Funktion nur verwenden, um es in sass zu konvertieren.

//Nehmen Sie als Beispiel den visuellen Entwurf für das iPhone 7 in der Größe @2x 750 Pixel Breite @function vw($px) {
    @return ($px / 750) * 100vw;
}

//Nehmen wir an, dass sich im visuellen Entwurf ein Div-Element mit einer Breite von 120px und einer Schriftgröße von 12px befindet.
div {
    Breite: vw(120);
    Schriftgröße: vw(12);
}

Vergleich zwischen VW-Einheit und Prozent-%-Einheit

Was ist also der Unterschied zwischen 100vw und der Breite: 100 %, die wir normalerweise verwenden?

1. Der Prozentsatz % wird basierend auf der Breite oder Höhe des übergeordneten Elements berechnet, während vw vh fest entsprechend dem Ansichtsfenster berechnet wird und nicht von der Breite und Höhe des übergeordneten Elements beeinflusst wird.

2.100vw umfasst die Breite der Seitenbildlaufleiste (die Seitenbildlaufleiste gehört zum Ansichtsfensterbereich, 100vw umfasst natürlich die Breite der Seitenbildlaufleiste). Wenn für Body oder HTML jedoch eine Breite von 100 % festgelegt ist, wird die Breite der Bildlaufleiste der Seite nicht berücksichtigt. Das heißt, 100vw ist breiter als 100 %, wenn eine vertikale Bildlaufleiste vorhanden ist. Dies führt zu einem Problem: Wenn bei der Verwendung von VW-Einheiten auf der PC-Seite der Seiteninhalt die Länge eines Bildschirms überschreitet und eine vertikale Bildlaufleiste angezeigt wird und ein Element mit der Breite 100 VW vorhanden ist, wird eine horizontale Bildlaufleiste angezeigt, da das Element (100 VW + Breite der Bildlaufleiste) die Breite des Ansichtsfensters überschreitet. (Die Bildlaufleiste auf dem mobilen Endgerät nimmt keinen Platz ein, daher tritt dieses Problem nicht auf.) Das PC-Endgerät erfordert jedoch im Allgemeinen kein elastisches Layout, daher ist es sicherer, möglichst die Breite 100 % zu verwenden.

• Gemäß der CSS3-Spezifikation umfassen Ansichtsfenstereinheiten hauptsächlich die folgenden 4:
  
• vw: 1vw entspricht 1 % der Ansichtsfensterbreite
• vh: 1vh entspricht 1 % der Ansichtsfensterhöhe
• vmin: Wählen Sie den kleinsten Wert von vw und vh
• vmax: Wählen Sie den größten Wert zwischen vw und vh

Gemessen in Ansichtsfenstereinheiten beträgt die Ansichtsfensterbreite 100 vw und die Höhe 100 vh (die linke Seite ist ein vertikaler Bildschirm, die rechte Seite ein horizontaler Bildschirm).

Wenn beispielsweise die Browser-Ansichtsfenstergröße auf dem Desktop 650 Pixel beträgt, dann ist 1vw = 650 * 1 % = 6,5 Pixel (dies ist eine theoretische Berechnung. Wenn der Browser 0,5 Pixel nicht unterstützt, kann das tatsächliche Renderergebnis 7 Pixel betragen).

Kompatibilität

Verwenden Sie geeignete Einheiten, um die Seite anzupassen

Bei der Entwicklung mobiler Endgeräte ist der wichtigste Punkt, wie die Seite angepasst werden kann, um Kompatibilität mit mehreren Endgeräten zu erreichen. Unterschiedliche Anpassungsmethoden haben ihre eigenen Vor- und Nachteile.

Was das gängige responsive Layout und das elastische Layout betrifft, erfordert das durch Media Queries implementierte Layout die Konfiguration mehrerer responsiver Haltepunkte und die damit verbundene Erfahrung ist auch sehr benutzerunfreundlich: Die Auflösung des Layouts innerhalb des responsiven Haltepunktbereichs wird beibehalten und beim Umschalten des responsiven Haltepunkts bringt das Layout eine diskontinuierliche Umschaltänderung mit sich, genau wie ein Kassettenspieler, der immer wieder „klickt“.

Für ein flexibles Layout, das dynamische Berechnungen von Rem-Einheiten verwendet, ist es notwendig, ein Skript in die Kopfzeile einzubetten, um Änderungen der Auflösung zu überwachen und die Schriftgröße des Stammelements dynamisch zu ändern und dabei CSS und JS miteinander zu verknüpfen.

Gibt es eine Möglichkeit, dieses Problem zu lösen?

Die Antwort ist ja. Indem wir geeignete Einheiten zur Implementierung adaptiver Seiten verwenden, können wir sowohl das Problem der Reaktionsfehler als auch das Problem der Skriptabhängigkeit lösen.

Die Nutzung basiert auf dem iPhone 6 (750)

Der erste Schritt besteht dabei grundsätzlich darin, den Meta-Tag für das mobile Endgerät zu setzen.

<meta name="viewport" content="Breite=Gerätebreite, Anfangsmaßstab=2,0, Maximalmaßstab=2,0, Minimalmaßstab=2,0, Benutzerskalierung=nein">

Da der DPR des iPhone 6 und der meisten anderen Geräte 2 beträgt, müssen wir ihn zur Vereinfachung des zweiten Schritts umrechnen.

Der zweite Schritt besteht darin, die Schriftgröße von Body und HTML festzulegen

html {
    Schriftgröße: 13.3333333333333vw // 100px
}

13.Woher kommt 33333333333333vw?

• Die optimale Auflösung beträgt 100vw, basierend auf iPhone 6 750px
• IKEA/iPhone6
  • 100 VW / 750 = 0,133333333333333 VW
• Wenn wir 100px als akzeptable Größe nehmen, dann
• 100px / 750 = 0,133333333333333px
• Das ist 1px = 0,1333333333333333vw
• Dann ist das gesamte Bild gleich 0,1333333333333333 * 10013,33333333333333vw = 100px
• Schließlich erhalten wir 100px = 1rem

Durch die Konvertierung auf diese Weise verwenden wir vw, um rem in 100px als Basis umzuwandeln

Dann kann es gut im Projekt verwendet werden

div {
 
     // Breite: 100px;
     Breite: 1rem; 
}
 
Spanne {
   // Höhe: 12px
    Höhe: .12rem
}

Dies ist das Ende dieses Artikels zur Verwendung von vw+rem für mobiles Layout. Weitere relevante Inhalte zum mobilen Layout von vw+rem finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!