CSS3-Mobil-Vw+Rem-Methode zum Erreichen eines reaktionsfähigen Layouts ohne Abhängigkeit von JS
|
1. Einleitung (1) Einführung in vw/vh Bevor wir sie verwenden, werfen wir einen kurzen Blick auf vw und rem und ihre Funktionen. vw ist eine neue Einheit in CSS3. Es ist die Abkürzung für „Ansichtsbreite“. Es wird definiert als die Aufteilung des aktuellen Bildschirms in 100 Teile. 1 vw ist 1 % des Bildschirms. Das entsprechende vh teilt die Höhe in 100 Teile. 1 vh ist 1 % der Bildschirmhöhe. Im Allgemeinen verwenden wir häufig vw-Einheiten, um die reaktionsfähige Entwicklung abzuschließen. (2) Einführung in das rem rem ist eine relative Längeneinheit. Der berechnete Wert der Schriftgröße ist relativ zum Stammelement (also dem HTML-Element) ein Vielfaches. Wenn Ihre HTML-Schriftart beispielsweise auf 20 Pixel eingestellt ist, entspricht 1 Rem auf der Seite beispielsweise 20 Pixel:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<Titel></Titel>
<Stil>
html,h1 {
Schriftgröße: 12px;
}
P {
Schriftgröße: 2rem;
}
</Stil>
</Kopf>
<Text>
<h1>Ich bin der Text in h1</h1>
<p>Ich bin der Text im p-Tag, doppelt so lang wie der h1-Text</p>
</body>
</html>2. Haupttext (1) Mit dem oben genannten Verständnis dieser beiden Einheiten können wir die reaktionsfähige Layoutverarbeitung des mobilen Endgeräts durch Konvertierung abschließen. Hier nehmen wir das iPhone 6/7/8 als Beispiel, die Bildschirmbreite beträgt 375 Pixel. 1vw = 3,75px (2) Okay, jetzt stellen wir uns vor, wie viele vw 100px entsprechen? Hier sind einige Berechnungen erforderlich. 100px = 26.6666666vw //Da es sich um eine Endlosschleife handelt, nehmen Sie hier 7 Dezimalstellen (3) Wie verbinden wir also rem und vw? Hier schreiben wir einen kleinen Fall:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="Breite=Gerätebreite,Höhe=Gerätehöhe,Anfangsmaßstab=1,0, Mindestmaßstab=1,0, Höchstmaßstab=1,0, benutzerdefiniert skalierbar=nein">
<Titel></Titel>
<link rel="stylesheet" href="">
<style type="text/css" media="Bildschirm">
html{
Schriftgröße: 26.6666666vw
}
P{
Schriftgröße: 0,2rem;
Breite: 2rem;
Höhe: 1rem;
Hintergrund: rosa;
Rand: 0 automatisch;
Zeilenhöhe: 1rem;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<P>Ich bin der Text im P-Tag</P>
</body>
</html>Im obigen Beispiel haben wir die Schriftgröße in HTML auf 26,6666666vw eingestellt, was bedeutet, dass die Schriftgröße 100px beträgt, und sie dann mit den Eigenschaften von rem kombiniert, um das responsive Front-End-CSS-Layout zu erzielen Zusammenfassung: Es gibt viele Arten von Front-End-Responsive-Layouts, es gibt auch viele Responsive-Frameworks für PCs und viele Frameworks für mobile Endgeräte sind ebenfalls responsive. Ich denke, diese Methode ist auch relativ einfach zu verwenden. Die Schriftgröße in HTML kann beliebig eingestellt werden, aber die Konvertierung ist sehr mühsam, daher wurden viele Methoden entwickelt. Viele Editoren verfügen über automatische Konvertierungsfunktionen, wie beispielsweise der von mir verwendete Sublime-Editor. Es gibt auch viele Online-Konvertierungen von Webseiten im Internet. Nun, das Obige ist meine Erfahrung bei der Verwendung. Wenn es Fehler gibt, korrigieren Sie mich bitte! 3. Einführung in andere responsive Layouts (1) Ablauflayout Das Flow-Layout ist ein prozentuales Layout. Stellen Sie beispielsweise die Breite des Webseitentexts auf 80 % und die Mindestbreite auf 960 Pixel ein. Bilder werden ähnlich verarbeitet (Breite: 100 %, die maximale Breite wird normalerweise auf die Größe des Bildes selbst eingestellt, um Verzerrungen durch Dehnung zu vermeiden). Layouteigenschaften: Wenn sich die Bildschirmauflösung ändert, ändert sich die Größe der Elemente auf der Seite, das Layout ändert sich jedoch nicht. [Das bedeutet, dass die Elemente nicht richtig angezeigt werden, wenn der Bildschirm zu groß oder zu klein ist] Entwurfsmethode: Verwenden Sie den Prozentsatz % zur Definition der Breite, die Höhe wird meist in px festgelegt. Sie kann entsprechend der Echtzeitgröße des Ansichtsfensters und des übergeordneten Elements angepasst werden, um sich so weit wie möglich an verschiedene Auflösungen anzupassen. Es wird häufig in Verbindung mit „max-width“/„min-width“ und anderen Eigenschaften verwendet, um den Größenbereich zu steuern und zu vermeiden, dass zu große oder zu kleine Werte die Lesbarkeit beeinträchtigen. Diese Layoutmethode wurde zu Beginn der Web-Frontend-Entwicklung verwendet, um mit PC-Bildschirmen unterschiedlicher Größe zurechtzukommen (als die Bildschirmgrößen sich noch nicht allzu sehr unterschieden). In der heutigen mobilen Entwicklung ist sie immer noch eine gängige Layoutmethode, weist jedoch offensichtliche Nachteile auf: Das Hauptproblem besteht darin, dass bei einer zu großen Bildschirmgröße die Anzeige auf einem Bildschirm, der im Verhältnis zum ursprünglichen Design zu klein oder zu groß ist, nicht richtig erfolgt. Da die Breite mithilfe des Prozentsatzes % angegeben wird, Höhe und Textgröße jedoch größtenteils mithilfe von px festgelegt sind, besteht der Anzeigeeffekt auf einem Mobiltelefon mit großem Bildschirm darin, dass einige Seitenelemente in der Breite sehr lang gestreckt werden, Höhe und Textgröße jedoch gleich bleiben wie zuvor (d. h. diese Dinge können nicht „flüssig“ werden) und die Anzeige sehr unkoordiniert ist. (2) Medienanfragen Media Query überwacht die aktuelle Bildschirmbreite, um auf Ihre entsprechenden Einstellungen zu reagieren. Beispielsweise beträgt die Schriftgröße eines 375-Pixel-Bildschirms 12 Pixel und die Schriftgröße eines 960-Pixel-Bildschirms 18 Pixel. Das ist für eine einfache Seite sehr groß, für große Projekte jedoch sehr praktisch. Eine Funktion von Media Query besteht darin, dass beim Zoomen von einem 375-Pixel-Bildschirm auf einen 960-Pixel-Bildschirm die Schrift oder das Bild plötzlich größer wird. Dies ist eine schlechte Erfahrung, spielt jedoch bei der tatsächlichen Verwendung keine Rolle. Designmethode: Medienabfrage + flüssiges Layout. Zusammenfassen: 1. Wenn Sie nur auf der PC-Seite arbeiten, ist das Streaming-Layout (feste Breite) die beste Wahl. 2. Wenn Sie auf einem mobilen Endgerät arbeiten und das Design keine große Höhe und keinen großen Elementabstand erfordert, ist das elastische Layout (vw) die beste Wahl. Dies lässt sich durch Anpassen der Schriftgröße mit CSS erreichen. 3. Wenn PC und Mobilgerät kompatibel sein müssen und die Anforderungen sehr hoch sind, ist Media Query immer noch die beste Wahl, vorausgesetzt, das Design ist je nach Höhe und Breite unterschiedlich und das responsive Layout ist je nach Media Query unterschiedlich. 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. |
<<: Detaillierte Erläuterung des Ausführungsprinzips des MySQL-Kill-Befehls
Artikel empfehlen
Eine umfassende Analyse der Möglichkeiten von Nginx
Vorwort Dieser Artikel konzentriert sich nur dara...
Anzeigen und Analysieren des MySQL-Ausführungsstatus
Wenn Sie den Eindruck haben, dass ein Problem mit...
Ein Artikel zum Lösen des Echarts-Kartenkarussell-Highlights
Inhaltsverzeichnis Vorwort Aufgabenliste tun Sie ...
So implementieren Sie Web-Stresstests mit Apache Bench
1. Einführung in Apache Bench ApacheBench ist ein...
Zwei einfache Beispiele für Menünavigationsleisten
Menüleiste Beispiel 1: Code kopieren Der Code lau...
Eine kurze Diskussion über die MySQL-Optimierungslösung für große Tabellen
Hintergrund Die Menge neuer Daten in der Geschäft...
Einführung in Linux und die am häufigsten verwendeten Befehle (leicht zu erlernen, kann aber mehr als 95 % der Probleme lösen)
Linux ist derzeit das am weitesten verbreitete Se...
Detaillierte Erklärung des Unterschieds zwischen Gerätebreite und Breite in CSS3-Medienabfragen
1.Gerätebreite Definition: Definiert die sichtbar...
Codebeispiele für allgemeine Docker-Datenvolumenvorgänge
Wenn der Entwickler Dockerfile zum Erstellen des ...
Zusammenfassung der Änderungen bei der Verwendung von Axios in den Studiennotizen zu Vue3
Inhaltsverzeichnis 1. Grundlegende Verwendung von...
Zusammenfassung der zehn häufigsten Probleme bei MySQL-Indexfehlern
Inhaltsverzeichnis Hintergrund 1. Die Abfragebedi...
MySQL startet langsames SQL und analysiert die Ursachen
Schritt 1. Aktivieren Sie die langsame MySQL-Abfr...
Detaillierte Erläuterung des Nginx-Forward-Proxys und des Reverse-Proxys
Inhaltsverzeichnis Weiterleitungsproxy Nginx-Reve...
Detaillierte Erklärung der Eigenschaften und Instanzverwendung von hasOwnProperty in js
1. js schützt hasOwnProperty nicht vor unrechtmäß...
Detaillierte Erläuterung der Reihenfolge der JS-Objektdurchquerung
Einige von Ihnen haben vielleicht gehört, dass di...