Verwenden Sie das Rem-Layout, um eine adaptive

Ich habe bereits einen Artikel über mobile Anpassung geschrieben. Er ist sehr lang und enthält zu viele Inhalte, was das Lesen verwirrend macht. Ich habe eine verständlichere Version umgeschrieben.

Warum anpassen?

Beispielsweise gibt der Designer für eine mobile Seite eine visuelle Entwurfsleinwand mit einer Breite von 750 vor, und ein gelber Block im visuellen Entwurf hat eine Größe von 702 x 300 und ist in der Zeichenfläche zentriert. Wir hoffen, dass das Darstellungsverhältnis auf jedem Gerät mit dem im visuellen Entwurf übereinstimmt und proportional zur Breite des Layout-Ansichtsfensters skaliert wird.

Auf Mobilgeräten legen wir für das Layout normalerweise die Ansichtsfensterbreite = Gerätebreite fest, d. h. der Bereich, in dem der Inhalt angezeigt wird, befindet sich innerhalb des Gerätebildschirms.

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">

Da die Breite verschiedener Geräte unterschiedlich ist, ist auch die Breite des Layout-Ansichtsfensters unterschiedlich. Beispielsweise beträgt die Layout-Ansichtsfensterbreite des iPhone 6 375 und die Layout-Ansichtsfensterbreite des iPhone 6 ​​Plus 414.

Für einen gegebenen visuellen Entwurf mit einer Leinwandbreite von 750 können wir, wenn er auf einem iPhone 6-Gerät mit einer Layout-Ansichtsfensterbreite von 375 präsentiert wird, den Pixelwert der Elemente im visuellen Entwurf wie folgt durch 2 teilen:

.Kasten{
    Breite: 351px;
    Höhe: 150px;
    Rand oben: 40px;
    Hintergrund: #F5A623;
}

Die Darstellung auf dem iPhone 6 ist wie rechts dargestellt und stimmt mit dem Layout des Bildentwurfs links überein.

Allerdings wird derselbe Code auf dem iPhone 6 Plus anders angezeigt, mit größerem Abstand auf beiden Seiten. Da das Layout-Ansichtsfenster des iPhone 6 Plus breiter ist als das des iPhone 6, hat sich die Größe des rechteckigen Felds nicht geändert und beträgt weiterhin 315 x 150.

Für ein gegebenes Bild mit einer Leinwandbreite von 750 können wir, wenn es auf einem iPhone 6 Plus-Gerät mit einer Layout-Ansichtsfensterbreite von 414 gerendert wird, den Pixelwert der Elemente im Bild proportional durch (750 / 414) teilen, das heißt:

.Kasten{
    Breite: 387,5px;
    Höhe: 165,6px;
    Rand oben: 44,2 Pixel;
    Hintergrund: #F5A623;
}

Auch kann die Wirkung der Seitenpräsentation mit der des visuellen Entwurfs identisch sein.

Um auf Seiten mit unterschiedlicher Gerätebreite (unterschiedlicher Ansichtsfensterbreite) denselben Effekt wie im visuellen Entwurf zu erzielen, müssen unterschiedliche CSS-Pixelwerte geschrieben werden. Unser Ziel ist es, mit demselben CSS-Code auf Geräten unterschiedlicher Breite denselben Effekt wie im visuellen Entwurf zu erzielen. Einfach ausgedrückt sollte das Größenverhältnis der Elemente und der Leinwand im visuellen Entwurf auf verschiedenen Geräten proportional skaliert werden, um einen adaptiven Effekt auf verschiedenen Geräten zu erzielen.

Verwenden Sie das Rem-Layout, um adaptive Probleme zu lösen

Wie kann ich denselben CSS-Code verwenden, um die Elementgröße proportional zur Proportion im visuellen Entwurf zu skalieren, wenn sich die Breite des Layout-Ansichtsfensters ändert? Wir kombinieren die Eigenschaften der relativen Einheit rem in CSS. Der Pixelwert der rem-Einheit ist relativ zur Schriftgröße des Root-Elements (HTML-Element). Beispiel: Wenn die Schriftgröße von HTML 100 Pixel beträgt und die Breite eines Elements im CSS-Stil auf 2rem eingestellt ist, dann beträgt die Breite dieses Elements auf der Seite 200 Pixel.

Entsprechend der proportionalen Skalierung der Elemente im visuellen Entwurf können wir folgende Beziehung finden:

Größe des visuellen Elements / Breite der visuellen Leinwand = (REM-Wert * Schriftgröße des HTML-Elements) / Breite des Layout-Ansichtsfensters = REM-Wert * (Schriftgröße des HTML-Elements / Breite des Layout-Ansichtsfensters)
= rem-Wert / (Breite des Layout-Ansichtsfensters / Schriftgröße des HTML-Elements)

Wenn:

Breite des Layout-Ansichtsfensters/Schriftgröße des HTML-Elements = fester Wert N

Sie können denselben CSS-Code verwenden, um die Anpassung an jedes Gerät zu erreichen.

rem-Wert = N * (Designelementgröße / Design-Canvas-Breite)

Daher müssen wir nur einen N-Wert bestimmen und zwei Schritte ausführen, um eine Selbstanpassung zu erreichen:

• Schritt 1: Dynamisches Einstellen der Schriftgröße des HTML-Elements = Breite des Layout-Ansichtsfensters / N
• Schritt 2: Konvertieren Sie die CSS-Pixelwerte der aus dem visuellen Entwurf exportierten Elemente in rem-Einheiten: rem-Wert = N * (Elementgröße des visuellen Entwurfs / Leinwandbreite des visuellen Entwurfs)

Wenn die Breite Ihrer Entwurfsleinwand 750 beträgt, können Sie zur einfacheren Berechnung der Rem-Werte N = 7,5 festlegen. Auf diese Weise müssen Sie nur den Größenwert im Entwurf durch 100 teilen, um den CSS-Pixelwert in Rem-Einheiten zu erhalten.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.