Responsive Layout-Zusammenfassung (empfohlen)

Grundkenntnisse der responsiven Layoutentwicklung

Dieses Kapitel ist im Wesentlichen in die folgenden Teile gegliedert

• Richtiges Verständnis von Responsive Design
• Schritte zum responsiven Design
• Aspekte, die beim Responsive Design beachtet werden müssen
• Grundsätze für die Implementierung eines responsiven Webseiten-Layouts

Erstens: Responsive Layout richtig verstehen

Responsive Webdesign bedeutet, dass eine Website mit mehreren Endgeräten kompatibel sein kann – statt für jedes Endgerät eine spezielle Version zu erstellen. Beispiel: Heutzutage gibt es in der Gesellschaft viele responsive Produkte wie Klappsofas, Klappbetten usw. Wenn wir das Sofa in eine Ecke stellen müssen, ist das Sofa wie ein Div und ein Platz in der Ecke ist wie ein übergeordnetes Element. Aufgrund der Änderung des Platzes des übergeordneten Elements müssen wir das Div anpassen, damit es weiterhin in der Ecke platziert werden kann. Im Projekt werden Sie auf verschiedene Terminals stoßen. Aufgrund der unterschiedlichen Terminalauflösungen ist es erforderlich, Ihre Seite mit mehreren Terminals kompatibel zu machen, wenn Sie eine bessere Benutzererfahrung bieten möchten.

Zweitens: Schritte des Responsive Designs

Nachdem wir nun verstanden haben, was Responsiveness ist, sprechen wir über die Schritte des Responsive Designs. Manche Leute sagen vielleicht: „Blogger, bist du dumm? Sind die Schritte des Responsive Designs nicht einfach 1. Nicht-responsiven Code schreiben, 2. In responsiven Code umwandeln, 3. Responsive Details behandeln und 4. Responsive Entwicklung abschließen?“ Der Blogger war schockiert. Es stellte sich heraus, dass es unter den Leuten viele Meister gibt. Er lächelte leicht, um seinen Respekt zu zeigen. Oh mein Gott, ich habe es falsch gesagt. Es sollte leicht gelächelt werden. Verstehen Sie mich nicht falsch.

Um nun zum Thema zurückzukommen: Da der Blogger ein Mensch ist, der den Dingen auf den Grund gehen möchte, werde ich tief in die Wurzeln des Responsive Designs eintauchen und mir ein tieferes Verständnis dieser vier Schritte verschaffen.

1. Layout und Setzen von Meta-Tags

Wenn Sie eine responsive Website erstellen oder eine nicht-responsive Website responsive machen, sollten Sie sich zunächst auf das Layout der Elemente konzentrieren. Wenn ich ein responsives Layout erstelle, schreibe ich normalerweise zuerst ein nicht-responsives Layout mit einer festen Seitenbreite. Ich glaube nicht, dass das hier für irgendjemanden schwierig sein wird. Wenn die Nicht-Reaktionsfähigkeit behoben ist, werde ich Medienabfragen und Reaktionscode hinzufügen. Dieser Vorgang erleichtert die Implementierung reaktionsfähiger Funktionen.

Wenn Sie fertig sind Wenn Sie Ihre nicht-responsive Website fertiggestellt haben, müssen Sie als Erstes den folgenden Code zwischen den Tags und auf Ihrer HTML-Seite einfügen. Dadurch wird die Bildschirmgröße auf 1:1 eingestellt. Auf dem iPhone und in anderen Smartphone-Browsern wird die vollständige Site-Anzeige bereitgestellt, und Benutzer können die Seite nicht vergrößern.

2. Stile über Medienabfragen festlegen

Media Query ist der Kern des Responsive Designs. Es kann mit dem Browser kommunizieren und ihm mitteilen, wie die Seite dargestellt werden soll. Wenn die Auflösung eines Terminals weniger als 980 Pixel beträgt, können Sie es wie folgt schreiben

3. Mehrere Ansichtsbreiten festlegen

Wenn wir mit iPad- und iPhone-Ansichten kompatibel sein möchten, können wir es wie folgt einstellen:

3. Schrifteinstellungen

Bisher sind die meisten von Entwicklern verwendeten Schrifteinheiten Pixel. Obwohl Pixel auf normalen Websites in Ordnung sind, benötigen wir dennoch responsive Schriftarten. Eine responsive Schriftart sollte im Verhältnis zur Breite des übergeordneten Containers stehen, damit sie sich an den Client-Bildschirm anpassen kann.

CSS3 führt eine neue Einheit namens „rem“ ein, die „em“ ähnelt, aber für HTML-Elemente bequemer zu verwenden ist.

rem ist relativ zum Stammelement. Vergessen Sie nicht, die Schriftgröße des Stammelements zurückzusetzen:

4. Was beim Responsive Design beachtet werden muss

1. Die Breite ist nicht festgelegt, Sie können Prozentwerte verwenden

2. Bildverarbeitung

Hier gebe ich jedem einen Schlüssel. Manche Leute sagen vielleicht: „Blogger, kannst du bitte aufhören, anzugeben?“ Welchen Schlüssel gibt es für die Bildbearbeitung? Meinst du, er öffnet die Tür? Blogger, wach auf!

Autsch, was habe ich für ein schlechtes Temperament. Der Schlüssel, den ich erwähnt habe, ist kein echter Schlüssel, sondern eine universelle Methode der Bildverarbeitung. Was ist das? Das Bild wird verflüssigt. Dann wird jemand fragen: „Was ist Bildverflüssigung?“ Das ist eine sehr gute Frage. Ich gebe Ihnen 99 Punkte. Ich würde Ihnen noch einen Punkt geben, weil ich befürchte, Sie könnten zu stolz werden. Wie wir alle wissen, ist Wasser unsichtbar und passt in viele Behälter. Können wir also das Bildanpassungsproblem lösen, wenn wir das Bild als Wasser betrachten?

Für Bilder in HTML-Seiten, wie etwa in Artikel eingefügte Bilder, können wir den CSS-Stil „max-width“ verwenden, um die maximale Breite des Bildes zu steuern, etwa:

Neben Bildern im img-Tag begegnen uns häufig auch Hintergrundbilder, wie zum Beispiel Logos als Hintergrundbilder:

Lassen Sie uns abschließend die Implementierungsprinzipien des responsiven Layouts zusammenfassen

Zunächst einmal sollten wir dem Prinzip „Mobile First“ folgen, wobei Interaktion und Design hauptsächlich auf Mobilgeräten basieren und der PC eine Erweiterung des Mobilgeräts darstellt. Eine Seite muss mit verschiedenen Endgeräten kompatibel sein, daher gibt es zwei wichtige Punkte, die wir responsive gestalten müssen: responsives Layout und responsive Inhalte (Bilder, Multimedia).

Ich weiß, was Sie erwarten. Kein Bild, keine Wahrheit. Keine Kuppel, ist das nicht Unsinn? Es ist nur Gerede. Keine Sorge, ich lasse mich nicht so unterkriegen. Hier ist meine persönliche responsive Layout-Kuppel.

Nun, hier ist das Ergebnis der harten Arbeit des Bloggers. Nächstes Mal werde ich das Layout des mobilen Terminals zusammenfassen.

Die obige Zusammenfassung des responsiven Layouts (empfohlen) enthält alle Inhalte, die der Editor mit Ihnen teilt. Ich hoffe, sie kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/dreamsboy/archive/2016/07/09/5656009.html