Ein paar Dinge, die Sie über responsives Layout wissen müssen

1. Einleitung

Responsive Webdesign ermöglicht die Anpassung einer Website an mehrere Geräte und mehrere Bildschirme gleichzeitig, sodass sich das Layout und die Funktionen der Website entsprechend der Nutzungsumgebung des Benutzers (Bildschirmgröße, Eingabemethode, Geräte-/Browserfunktionen) ändern können. Dieser Artikel stellt hauptsächlich einige wichtige, aber leicht zu übersehende Wissenspunkte zum responsiven Layout vor. Wenn Sie weitere hochwertige Artikel lesen möchten, klicken Sie bitte auf den GitHub-Blog

2. Ansichtsfenster

Der im mobilen Frontend häufig erwähnte Viewport ist der Bereich im Browser, der zur Darstellung von Webseiten verwendet wird. Der Ansichtsbereich entspricht normalerweise nicht der Bildschirmgröße, insbesondere wenn die Größe des Browserfensters geändert werden kann . Es gibt Unterschiede zwischen den Ansichtsfenstern auf Mobiltelefonen und PCs. Die Ansichtsfensterbreite auf PCs entspricht der Auflösung, während die Ansichtsfensterbreite auf Mobilgeräten nichts mit der Auflösung zu tun hat. Der Standardbreitenwert wird vom Gerätehersteller angegeben. iOS und Android stellen die Ansichtsfensterauflösung grundsätzlich auf 980 Pixel ein.

1. Warum sollte das mobile Ansichtsfenster auf 980 Pixel eingestellt werden?

Jobs stellte sich damals folgendes vor: Wenn das iPhone auf dem Markt populär wird, aber viele Websites noch keine Zeit haben, mobilgerätefreundliche Webseiten zu erstellen, müssen die Benutzer ihre Mobiltelefone verwenden, um auf die Computerversion der Webseiten zuzugreifen. Wie können sie die Seiten auf dem großen Bildschirm auf einem kleinen Bildschirm lesbar machen ? Boss Joe wollte eine Ansichtsfensterbreite für Mobiltelefone festlegen und diese so gestalten, dass sie der Seitenbreite der meisten PC-Webseiten der Welt entspricht, also 980 Pixel. Auf diese Weise bleibt beim Zugriff auf die Computerversion der Webseite mit Ihrem Mobiltelefon kein leerer Bereich daneben. Allerdings wird der Text nach dem Zoomen der Seite sehr klein und die Benutzer müssen manuell hinein- und herauszoomen, um ihn deutlich sehen zu können, was ein sehr schlechtes Erlebnis ist.

2. Ansichtsfenster einschränken

Um das vorherige Problem zu lösen, können Sie der Webseite die folgende Codezeile hinzufügen:

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

width=Gerätebreite Der Ansichtsbereich hat die Gerätebreite (eine von Menschen festgelegte Breite) //Wenn nicht festgelegt, beträgt der Standardwert 980 px
initial-scale=1.0 Die anfängliche Ansichtsfenstergröße beträgt 1.0 maximum-scale=1.0 Das maximale Vielfache davon beträgt 1.0 user-scalable=0 Das Skalieren des Ansichtsfensters ist nicht zulässig

Das Viewport-Tag teilt dem Browser mit, wie die Webseite gerendert werden soll. Hier bedeutet der Tag: Rendere den Inhalt der Webseite entsprechend der Gerätebreite (device-width). Wenn Sie sich die Auswirkungen auf einem Gerät ansehen, das dieses Tag unterstützt, werden Sie es verstehen.

Nicht schlecht! Das Benutzererlebnis wurde erheblich verbessert! ! !
Wenn Sie zu diesem Zeitpunkt document.documentElement.clientWidth verwenden, um die Bildschirmbreite des Browsers zu testen, werden Sie feststellen, dass die aktuelle Ansichtsfensterbreite der Breite des Mobiltelefonbildschirms entspricht und die ungefähre Ansichtsfensterbreite zwischen 320 und 480 liegt (wenn das Telefon vertikal verwendet wird).
Die Größe dieses Ansichtsfensters wird vom Handyhersteller vorgegeben, der so dafür sorgen kann, dass unser Text, beispielsweise 16px, in diesem Ansichtsfenster übersichtlich und in der richtigen Größe dargestellt wird. Daher ist das eingeschränkte Ansichtsfenster eines Telefons mit großem Bildschirm größer als das eingeschränkte Ansichtsfenster eines Telefons mit kleinem Bildschirm. Dadurch wird sichergestellt, dass unsere Webseiten Schriftgröße und Zeilenhöhe in Pixeln angeben können .
Es ist zu beachten, dass die Ansichtsfensterbreite nach der Einschränkung nicht ihre eigene Auflösung ist! ! Die Auflösung jedes Mobiltelefons ist viel größer als die Breite seines Ansichtsfensters!
Der wichtigste Satz: Front-End-Entwicklungsingenieure kümmern sich überhaupt nicht um die Auflösung des Mobiltelefons, uns interessiert nur das Ansichtsfenster.

3. Bilder

Es heißt oft: „Ein Bild sagt mehr als tausend Worte“, und das stimmt. Egal, wie viel Text wir auf unsere Webseite über Muffins schreiben, sie wird nicht so ansprechend sein wie die Bilder. Als Nächstes fügen wir oben auf der Seite ein Bild eines Pfannkuchens (2000 Pixel breit) hinzu, das einen ähnlichen Effekt wie das große Titelbild hat und die Benutzer dazu verleitet, nach unten zu schauen.

Wow, das ist wirklich ein großes Bild. Es lässt die ganze Seite unausgewogen erscheinen und läuft horizontal über. Nein, dieses Problem muss gelöst werden. Wir können CSS verwenden, um dem Bild eine feste Breite zu geben, das Problem besteht jedoch darin, dass wir eine automatische Skalierung auf Bildschirmen unterschiedlicher Größe wünschen . Beispielsweise beträgt die Bildschirmbreite des iPhone in unserem Beispiel 320 Pixel. Wenn wir das Bild auf 320 Pixel Breite einstellen, was passiert, wenn der iPhone-Bildschirm gedreht wird? Zu diesem Zeitpunkt werden aus 320 Pixeln 480 Pixel.
Die Lösung ist einfach. Mit nur einer Zeile CSS-Code passt sich das Bild automatisch der Containerbreite an:

img {
 maximale Breite: 100 %;
}

Wenn ich zum Telefon zurückgehe und die Seite aktualisiere, entspricht das Ergebnis eher meinen Erwartungen.
Die Max-Width-Regel wird hier deklariert, um sicherzustellen, dass alle Bilder in maximal 100 % ihrer eigenen Größe angezeigt werden (d. h., sie können nur so groß angezeigt werden wie sie selbst). Wenn zu diesem Zeitpunkt das Element, das das Bild enthält (z. B. der Textkörper oder das Div, das das Bild enthält), kleiner als die eigentliche Breite des Bildes ist, wird das Bild so skaliert, dass es den maximal verfügbaren Platz ausfüllt .

Warum nicht width:100% verwenden?

Um eine automatische Skalierung von Bildern zu erreichen, können Sie auch das allgemeinere Breitenattribut verwenden, z. B. width:100%. Diese Regelung gilt hier allerdings nicht. Denn diese Regel führt dazu, dass es so breit erscheint wie sein Container. In Fällen, in denen der Container viel breiter als das Bild ist, wird das Bild unnötig gestreckt.

4. Mobiler Browserkernel

Auf der mobilen Seite gibt es nur vier unabhängige Browser-Kernel, nämlich Microsoft Trident, Firefox Gecko, den Open-Source-Kernel Webkit und Opera Presto.
Derzeit wird Microsoft Trident hauptsächlich als integrierter Browser für WP7- und 8-Systeme auf mobilen Endgeräten verwendet. Der Presto-Kernel von Opera umfasst hauptsächlich Opera Mobile, Opera Mini, den Opera-Browser und die Betaversion von Opera HD. Der Anwendungsbereich des Webkit-Kernels ist relativ breit. Der native Android-Browser, Apples Safari und Google Chrome (von Android 4.0 verwendet) basieren alle auf dem Open-Source-Kernel von Webkit.

Kompatible Präfixe:
1-ms-
2 -moz-
3 -o-
4 -WebKit-

Browser-Marktanteil chinesischer Benutzer:

UC, Android Built-in, Chrome, Safari und QQ Browser basieren alle auf WebKit-Kerneln und, wie aus der Abbildung ersichtlich, machen sie den größten Teil des Marktanteils aus.
Sie müssen also gut auf -webkit- aufpassen. Einige Unternehmen schreiben einfach nur Kompatibilität mit -webkit- und keine andere Kompatibilität wie -ms-.

5. Ablauflayout

Das Prozentlayout wird auch Flusslayout und flexibles Boxlayout genannt. Die mobile Webseite hat keine zentrale Seite, sie ist auf beiden Seiten ausgefüllt.
Die Eigenschaften, die in Prozent festgelegt werden können, sind Breite, Höhe, Polsterung und Rand. Andere Eigenschaften wie Rahmen und Schriftgröße können nicht in Prozenten festgelegt werden.

• Wenn die Breite als Prozentsatz angegeben wird, bezieht sie sich auf den Prozentsatz der Breite des übergeordneten Elements.
• Wenn die Höhe als Prozentsatz angegeben wird, bezieht sie sich auf den Prozentsatz der Höhe des übergeordneten Elements.
• Wenn die Polsterung in Prozent angegeben wird, bezieht sie sich auf den Prozentsatz der Breite des übergeordneten Elements, unabhängig davon, ob es sich um horizontale oder vertikale Polsterung handelt.
• Wenn der Rand in Prozent angegeben wird, bezieht er sich auf den Prozentsatz der Breite des übergeordneten Elements, unabhängig davon, ob es sich um einen horizontalen oder vertikalen Rand handelt.
• Eine Prozentangabe für die Rahmenbreite ist nicht möglich.
  

Schauen wir uns ein Beispiel an:

	div{
		Breite: 200px;
		Höhe: 300px;
		Polsterung: 10px;
	}
	div p{
		Breite: 50 %;
		Höhe: 50 %;
		Polsterung: 10 %;   
	}
    Wie groß ist die tatsächliche Breite von p zu diesem Zeitpunkt? 

Zu diesem Zeitpunkt beträgt die tatsächliche Breite von p 140px*190px

VI. Medienanfragen

1. Warum benötigt Responsive Webdesign Medienabfragen?

Mit CSS3-Medienabfragen können wir basierend auf den Fähigkeiten oder Bedingungen bestimmter Geräte spezifische CSS-Stile auf Webseiten anwenden . Ohne Medienabfragen wäre es unmöglich, das Erscheinungsbild einer Webseite allein mit CSS wesentlich zu verändern. Dieses Modul ermöglicht es uns, im Voraus CSS-Regeln zu schreiben, die sich an viele unvorhersehbare Faktoren anpassen, wie etwa horizontale oder vertikale Bildschirmausrichtung, große oder kleine Ansichtsfenster usw. Obwohl sich das Design durch ein flexibles Layout an mehr Szenarien anpassen lässt, einschließlich Bildschirmen bestimmter Größen, reicht dies manchmal nicht aus, da wir auch detailliertere Anpassungen am Layout vornehmen müssen. Möglich wird dies durch Medienabfragen, die der grundlegenden bedingten Logik in CSS entsprechen.

2. Syntax für Medienabfragen

Die erste Regel, die wir außerhalb der Medienabfrage schreiben, ist der „Basis“-Stil, der für jedes Gerät gilt. Auf dieser Grundlage fügen wir nach und nach verschiedene visuelle Effekte und Funktionen für Geräte mit unterschiedlichen Ansichtsfenstern und Fähigkeiten hinzu.

Körper {
    Hintergrundfarbe: grau;
 } 
@media screen und (min-width:1200px) {
    Körper{
        Hintergrundfarbe: rosa;
	}
}
 @media screen und (min-width:700px) und (max-width:1200px) {
    Körper{
	Hintergrundfarbe: blau;
	}
}
@media screen und (max-width:700px) {
    Körper{
	Hintergrundfarbe: orange;
        }
}

@media steht für eine Medienabfrage, die abfragt, auf welchem ​​Gerät diese Webseite aktuell angezeigt wird und wie breit sie ist. Bildschirm bedeutet, dass es sich bei dem Gerät zum Betrachten dieser Webseite um einen Monitor und nicht um ein Hörgerät für Behinderte oder einen Drucker handelt. Verwenden Sie das Symbol und, um alle Möglichkeiten aufzulisten.
Hinweis: Medienabfragen können nur Selektoren umschließen, keine k:v-Paare.
IE6, 7 und 8 unterstützen keine Medienabfragen. Um zu verhindern, dass einige mobile Browser keine Medienabfragen unterstützen, sollten Sie nicht alle Selektoren in Medienabfragen einfügen.

7. Rem-responsives Layout

REM-Responsive-Layout-Idee

• Im Allgemeinen sollten Sie für ein Element keine bestimmte Breite festlegen. Für einige kleine Symbole können Sie jedoch einen bestimmten Breitenwert festlegen.
• Der Höhenwert kann auf einen festen Wert eingestellt werden. Wir werden die Größe des Designentwurfs streng aufschreiben.
• Alle festen Werte werden in REM-Einheiten festgelegt (legen Sie zuerst einen Benchmark-Wert in HTML fest: das entsprechende Verhältnis von PX und REM, ermitteln Sie dann den PX-Wert beim Rendern und konvertieren Sie ihn beim Layout in einen REM-Wert).
• JS ermittelt die tatsächliche Bildschirmbreite, dividiert sie durch die Breite des Designentwurfs, berechnet das Verhältnis und setzt den vorherigen Benchmarkwert entsprechend dem Verhältnis zurück, sodass sich das Projekt an das mobile Endgerät anpassen kann
  

Was ist REM und worin besteht der Unterschied zu EM?

rem: Die Stilwerte der REM-Einheiten der Elemente auf der aktuellen Seite werden dynamisch basierend auf dem Schriftgrößenwert des HTML-Elements berechnet.
em: Gibt ein Vielfaches der Schriftgröße des übergeordneten Elements an. (Sonderfall: Im Text-Indent-Attribut gibt es die Textbreite an)

  Text → Schriftgröße: 20px;
   <div Klasse="box1"> → Schriftgröße: 2em;
	Kasten1
	  <div Klasse="box2"> → Schriftgröße:2em;
		Kasten2
	    <div Klasse="box3"> → Schriftgröße: 2em;
	    	Kasten3
	    </div>
	 </div>
  </div> 

Wenn „em“ als Einheit verwendet wird, wird die Eigenschaft „font-size“ berechnet und übernommen und für „box1“ wird eine Größe von 40 Pixeln berechnet. Dann erben Box2 und Box3 darin 40px. Mit der Einheit em können Sie nicht nur die Schriftgröße festlegen, sondern auch alle Eigenschaften des Boxmodells wie Breite, Höhe, Polsterung, Rand und Rahmen
Ein Vorteil von rem besteht darin, dass es mit Medienabfragen verwendet werden kann, um ein responsives Layout zu erreichen:

@media screen und (min-width: 320px) {
    html {Schriftgröße: 14px;}
}
@media screen und (min-width: 360px) {
    html {Schriftgröße: 16px;}
}
@media screen und (min-width: 400px) {
    html {Schriftgröße: 18px;}
}

Anwendungsszenarien

Wenn auf die von uns erstellte H5-Seite nur auf Mobilgeräten zugegriffen werden kann, liegt dies daran, dass REM nicht mit niedrigeren Browserversionen kompatibel ist. Wenn das Mobil- und das PC-Terminal einen Codesatz gemeinsam nutzen, wird die Verwendung des Flow-Layouts empfohlen.

So erstellen Sie ein REM-responsives Layout

1. Holen Sie sich das PSD-Design vom UI-Designer und legen Sie dann im Stil einen Schriftgrößenwert für HTML fest. Normalerweise legen wir einen Wert fest, der für spätere Berechnungen praktisch ist, zum Beispiel: 100px

html{
Schriftgröße: 100px; //1rem=100px
}

2. Seite und Stil schreiben <br /> Schreiben Sie zuerst den Stil entsprechend der Größe des Designentwurfs. Wenn Sie dann den Stilwert schreiben, müssen Sie den Pixelwert durch 100 teilen, um den entsprechenden REM-Wert zu berechnen.
Es ist anzumerken, dass wir in realen Projekten im Allgemeinen keinen festen Wert für die Breite des äußeren Rahmens schreiben. Gemäß der Idee des Flow-Layouts verwenden wir Prozentsätze für das Layout.

Rand:0 0,2rem
Höhe: 3rem;

3. Berechnen Sie den Schriftgrößenwert unseres HTML basierend auf der aktuellen Bildschirmbreite und der Breite des Designentwurfs <br /> Beispiel: Die Breite des Designentwurfs beträgt 640 Pixel und einer der Teile ist eine Diashow mit einer Größe von 600 x 300 Pixeln. Legen Sie im Stil einen Schriftgrößenwert von 100 Pixeln für HTML fest. Dann sollte die Diashowgröße 6 rem x 3 rem betragen. Wenn die Bildschirmbreite des Mobiltelefons 375 Pixel beträgt, auf welchen Wert sollte die Schriftgröße eingestellt werden?

375/640*100->fontsize=58.59375//Die Diashow kann an die Größe des Handy-Bildschirms angepasst werden

Berechnen Sie dynamisch auf Grundlage des Verhältnisses der aktuellen Bildschirmbreite zur Breite des Entwurfs, wie hoch der Schriftgrößenwert bei der aktuellen Breite sein soll. Ändert sich der Schriftgrößenwert, werden die Werte aller zuvor festgelegten REM-Einheiten automatisch entsprechend erhöht oder verringert . Dies kann mit dem folgenden Code erreicht werden:

<Skript>
~Funktion(){
var desW=640,
winW=Dokument.Dokumentelement.Clientbreite,
Verhältnis=winW/desW;
Dokument.documentElement.style.fontSize=Verhältnis*100+"px";
}();
</Skript>

Wenn die aktuelle Bildschirmbreite jedoch größer als die Designbreite ist, wird das Bild gestreckt und verzerrt. Daher muss der obige Code leicht geändert werden:

//html-Teil <section id="main">
<div Klasse="Box"></div>
</Abschnitt>
//js-Teil <script>
~Funktion(){
var desW=640,
winW=Dokument.Dokumentelement.Clientbreite,
Verhältnis=winW/desW;
var oMain = document.getElementById('main');
wenn(winW>desW){
oMain.style.width=desW+"px";
oMain.style.margin="0 auto";
zurückkehren;
}
Dokument.documentElement.style.fontSize=Verhältnis*100+"px";
}();
</Skript>

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.