Grundlagen des responsiven HTML5-Layouts (1)

HTML5 responsives Layout (1)

Layoutmethode für mobile Entwicklung – flüssiges Layout

Wenn Sie zum ersten Mal auf das Konzept des flüssigen Layouts stoßen, werden Sie denken, dass dieses Konzept sehr hochwertig ist, aber nach einem tieferen Verständnis werden Sie feststellen, dass es tatsächlich sehr einfach ist. Für diejenigen, die Erfahrung in der HTML-Desktop-Webentwicklung haben. Tatsächlich wurde das Fluid-Layout einige fest codierte Layouts auf dem Desktop in Prozentsätze geändert, um sie an verschiedene mobile Größen anzupassen.

Flow-Layout kann für Laien auch als Prozent-Layout bezeichnet werden, das normalerweise die folgenden Punkte umfasst:

• Breitenprozentsatz

• Positionierungsprozentsatz

• Px durch em ersetzen und rem

• Elastisches Bild Das Referenzobjekt zum Festlegen dieser Prozentsätze wird entsprechend der Bildschirmgröße des Mobiltelefons angepasst, und durch Größenanpassung wird ein bestimmter Effekt erzielt.

Warum müssen Sie ein flüssiges Layout verwenden? ?An mobiles Endgerät anpassen?

Webseiten mit fester Pixelgröße sind die einfachste Möglichkeit, Anzeigen mit fester Pixelgröße anzupassen. Diese Methode ist jedoch keine vollständig kompatible Produktionsmethode für zukünftige Webseiten. Wir benötigen einige Methoden zur Anpassung an unbekannte Geräte. Feste Pixelgrößen (960/980) sind nicht zukunftssicher.

So verwenden Sie Prozentsätze Layoutseite?

Größenprozentsatz:

Ändern Sie die Webseite vom festen Layout in das prozentuale Layout:

Erforderliche zu merkende Formel: Zielelementbreite / Kontextelementbreite = prozentuale Breite.

PS: Die Breite des Kontextelements bezieht sich hier auf die Breite des damit verbundenen übergeordneten Elements, was sich direkt auf den Breitenprozentsatz des untergeordneten Elements auswirkt.

Positionsprozentsatz:

Im Grunde ähnlich dem Größenprozentsatz, also dem ursprünglichen festen Rand bzw Positionierungsentfernung in Prozent umgerechnet

Zum Beispiel:

und die linke Seite der Seite sind 50 Pixel groß und die Kontextbreite beträgt 320 Pixel, also 50/320 = 15,625 %

Reservieren Sie 5 Dezimalstellen.

em:

Die Funktion von em besteht im Allgemeinen darin, die Schriftgröße festzulegen, eine Standardschriftgröße im übergeordneten Element festzulegen und den Prozentsatz der Schriftart über em zu steuern.

• Der Wert von em ist nicht festgelegt

• em erbt die Schriftgröße des übergeordneten Elements.

rem:

Obwohl em die prozentuale Anzeige von Schriftarten realisieren und die Schriftgröße entsprechend der Bildschirmgröße proportional ändern kann, wird die übergeordnete Schriftart verwendet, sobald während des eigentlichen Entwicklungsprozesses eine strukturelle Verschachtelung erfolgt Wenn sich die Proportionen ändern, ändert sich die Schriftart des untergeordneten Elements proportional zur Änderung der Schriftart des übergeordneten Elements. Wenn em zum Ändern der Schriftart verwendet wird, ist der Berechnungsaufwand sehr groß, was zwangsläufig eine gewisse Belastung für die Entwicklung darstellt.

In CSS3 wurde eine neue Einheit rem eingeführt, die sich nur basierend auf HTML-Tags ändert.

rem steht für root em, und der Stamm von em ist html, was bedeutet, dass sich der Anteil nur basierend auf html ändert.

Flexibles Bild:

Bildeinstellungen width:100 % oder background-size:100 % 100 %.

Bildeinstellungsschwellenwert: maximale Breite.

kann die maximalen und minimalen Werte des Bildes festlegen.

Natürlich ist das flüssige Layout nur eine Möglichkeit zur Anpassung an das mobile Endgerät und kann nicht den Effekt einer responsiven Webseite erzielen. Später werde ich Ihnen eine weitere Anpassungsmethode namens Medienabfrage vorstellen. Durch die Kombination der beiden Anpassungsmethoden kann der endgültige reaktionsfähige Layouteffekt erzielt werden.

Das Obige ist der Inhalt der HTML5-Responsive-Layout-Grundlagen (1). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!