Eingehende Analyse des responsiven Layouts

Konzept

Responsive Layout ist die Darstellung von Responsive-Design-Lösungen. Der besondere Punkt besteht darin, dass die Webseite auf verschiedenen Geräten automatisch die Bildschirmbreite erkennen und je nach Anzeigebereich des Geräts unterschiedliche Inhalte anzeigen kann (bezieht sich im Allgemeinen auf die Bildschirmbreite, natürlich kann es auch andere sein). kann weiter unten im Detail erläutert werden) Wirkung. Der einfache Punkt besteht darin, ein Layout zu entwerfen, das sowohl auf PCs als auch auf mobilen Endgeräten verwendet werden kann.

Wie implementiert man ein responsives Layout?

Es gibt drei beliebte Methoden

1, Prozentsatz

Erreicht durch Festlegen der Breite jedes Felds als Prozentsatz.

Vorteile: Einfach und bequem

Nachteile: Bei zusätzlichen Einstellungen von Rand und Abstand oder bei der Verwendung verschiedener Browser wird das Layout unübersichtlich

2, Meta Tag

Der Codeausschnitt ist :

<meta name="viewport" content="width=device-width, initial-scale=1" />

Dies dient hauptsächlich dazu, den Code an den mobilen Bildschirm anzupassen. Der Viewport bezieht sich auf den Namen, der gelesen wird, wenn das Meta-Tag geladen werden muss, nämlich „Viewport-Breite“. muss gleich der Gerätebreite (Gerätebreite) sein. Dies weist den Browser hauptsächlich an, die Breite des Layout-Ansichtsfensters auf die optimale Breite des Geräts einzustellen, und der Anfangsmaßstab (Skalierungsverhältnis) beträgt 1. Dies stellt sicher, dass wann Laden, Ermitteln Sie die Breite des Geräts unter Beibehaltung der Originalgröße, um Medienabfragen zu erleichtern

3, @media Medienabfragen

Das CSS-Codesegment ist:

@media screen and (min-width: 10rem) and (max-width: 20rem) { ... }

Der erste Bildschirm bedeutet hier Bildschirm und es gibt viele Parameter darin , Einschließlich „Alle“ (für alle Geräte), „Drucken“ (für Drucker und Druckvorschauen), „Sprache“ (für Bildschirmlesegeräte und andere Ton erzeugende Geräte).

Verwenden Sie und, um mehrere Situationen nebeneinander anzuzeigen, minimale Breite und maximale Breite, um zu definieren, welche Bildschirmgröße angezeigt werden soll. Dies ist die Seele der Reaktionsfähigkeit.

Das obige Beispiel ist der Medienabfragebildschirm. Die minimale Breite beträgt 10rem und die maximale Breite beträgt 20rem. Ich verwende die Gerätebreite von 20rem, um Stile oder andere Funktionen innerhalb der Klammern zu implementieren. Das darin enthaltene rem kann auch in Einheiten wie px oder em usw. geändert werden.

Vorteile: Die meisten responsiven Layouts werden jetzt mit @media implementiert und können geschrieben werden. Es gibt eine Wenn Sie eine große Anzahl öffentlicher Stile benötigen, können Sie ein reaktionsfähiges Layout erreichen, indem Sie die entsprechenden Funktionen in die geschweiften Klammern einfügen.

Nachteile: Möglicherweise müssen Sie verschiedene Stile für dieselbe Klasse schreiben, der Code ist komplizierter und die Schwierigkeit ist etwas schwieriger.

Welche Methode wird verwendet, um die Reaktionsfähigkeit in der Anwendung zu implementieren?

Keine Methode ist perfekt. Es wird empfohlen, drei Methoden abwechselnd zu verwenden und die entsprechende Methode an der entsprechenden Stelle einzusetzen.

Im Layoutprozess werden Breitenprozentsatz und Medienabfrage im Allgemeinen synonym verwendet. Fügen Sie vor dem Laden der Webseite Meta-Tags hinzu, um den Inhalt des Ansichtsfensters zu definieren praktisch. Mobile Reaktionsfähigkeit. Auch die Gerätekompatibilität wird berücksichtigt.

Der allgemeine Ansatz für responsives Design besteht darin, drei oder vier Layouts basierend auf den Haupttypen von Zugriffsgeräten der Zielbenutzer zu erstellen. . Für jedes Layout gibt es einen Bereich. Beispielsweise kann die Auflösung eines Mobiltelefons mit kleinem Bildschirm auf [320.640] eingestellt werden. Dann entwerfen Sie einfach jedes Layout separat. Im Allgemeinen passt jedes Layout hauptsächlich die Anordnungsreihenfolge der Module an, und je weniger Inhaltsanpassungen, desto besser (um die Anpassungskosten für den Benutzer zu minimieren).

Reaktionsvorteile

Im Vergleich zur vorherigen Flexbox In Im Vergleich dazu ist das reaktionsfähige Layout besser und proaktiver bei der Anzeige unterschiedlicher Effekte entsprechend den Änderungen auf dem Gerät des Benutzers. Es ist flexibler und besser lesbar als die flexible Box. Eine reaktionsfähige Lösung löst die Anpassungsprobleme aller Geräte.

Reaktionsnachteile

Hohe Schwierigkeiten bei der Entwicklung und Korrespondenz Die CSS-Datei kann mehrfach oder einzeln sein.

wird nicht am Ende geschrieben. Obwohl es bei dieser Frage um eine eingehende Analyse geht, geht es eigentlich nur um die oberflächlichen Probleme der Reaktionsfähigkeit. Es gibt andere Möglichkeiten, reaktionsfähigen Code zu optimieren, was eine ständige Recherche erfordert Wenn es Fehler gibt, können Sie mich gerne korrigieren.

Das Obige ist eine ausführliche Analyse des responsiven Layouts. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com).