So implementieren Sie die Größenanpassung mobiler Webseiten

Ich habe das vorliegende Projekt endlich abgeschlossen und die vermissten Personen sind zurück! Während der Durchführung des Projekts sind mir viele bedenkenswerte Punkte aufgefallen, die ich kurz erläutern werde. Das erste aufgetretene Problem ist die Anpassung der Webseitengröße.

Die am häufigsten verwendeten Methoden sind:

• Erstens sollte die Seitengröße den Bildschirm ausfüllen, ohne überzulaufen. Fügen Sie einfach das Ansichtsfenster in das HTML-Tag <head> ein (wie unten gezeigt). Die Parameter stellen dar: Seitenbreite = Bildschirmbreite, die maximalen und minimalen Skalierungsverhältnisse sind beide 1, und Benutzer dürfen nicht hinein- oder herauszoomen.

XML/HTML-CodeInhalt in die Zwischenablage kopieren

< Meta Name = "Ansichtsfenster" Inhalt = "Breite=Gerätebreite, maximaler Maßstab=1,0, minimaler Maßstab=1,0, benutzerdefiniert skalierbar=nein" >

• Prozentuale Anpassung: Wandeln Sie die Längeneinheit in eine Prozentangabe um, sodass sich bei unterschiedlichen Breiten die Länge und Breite des Elements ändert.

Vorteile: Nahtlose Verbindung zwischen den Breiten und relativ komfortable Bedienung.

Nachteile: Die Schriftgröße erfordert zur Anpassung einen weiteren Satz adaptiver Methoden, ab einer Bildschirmbreite von 700px werden die Elemente bei einer weiteren prozentualen Anpassung zu groß, was die Anpassung erschwert.

•Rem und em adaptiv: Verwenden Sie die Media-Query-Methode, um die Schriftgröße von <html> oder <body> bei unterschiedlichen Bildschirmbreiten zu bestimmen. Verwenden Sie dann rem und em anstelle von px als Einheiten, um Adaptivität zu erreichen.

Vorteile: Es kann entsprechend unterschiedlicher Bildschirmbreiten eingestellt werden, wodurch das oben erwähnte Proportionsproblem bei zu großem Bildschirm perfekt gelöst werden kann. Auch die Schriftgröße stellt kein Problem dar.

Nachteile: Es wird entsprechend dem Breitenbereich eingestellt und kann keine nahtlose Transformation erreichen.

--------------------------------------------------------------------------------

Diese Kompatibilitätsmethoden haben jeweils ihre eigenen Vor- und Nachteile, und keine davon ist perfekt. Wie können wir die Vorteile kombinieren und gleichzeitig die Nachteile vermeiden?

Als ich mich auf die adaptive Methode von Taobao bezog, entdeckte ich zufällig, dass die Schriftgröße der Seite <html> automatisch entsprechend der Bildschirmbreite angepasst wird und der Quotient aus Bildschirmbreite und eingestellter Schriftgröße bestimmt wird.

Ich vermute also, dass JS zum Ermitteln der Bildschirmbreite verwendet wird, diese in einem festen Verhältnis verkleinert wird und diese als Einheitslänge von Rem zur Anpassung verwendet wird.

Ist das nicht eine Lösung mit allen Vorteilen? ? Erlauben Sie mir bitte, kurz aufgeregt zu sein (☆_☆)

--------------------------------------------------------------------------------

Der JS-Code ist sehr einfach zu schreiben und löst perfekt das Problem, dass mit REM-Einstellungen keine nahtlose Verbindung hergestellt werden kann.

Nach dem Testen auf der mobilen Seite traten jedoch Probleme auf. Safari auf der mobilen Seite führte das JS blitzschnell aus, bevor das HTML geladen wurde. Bevor die Seite die Breite entsprechend dem Ansichtsfenster eingestellt hatte, las JS die falsche Breite, wodurch das Element doppelt so groß wurde wie zuvor 0^0. Um das Problem zu lösen, war setTimeout() erforderlich.

--------------------------------------------------------------------------------

Endgültiger Code

JavaScript CodeInhalt in die Zwischenablage kopieren

Zepto( Funktion ($){
var win = Fenster,
doc = Dokument;
Funktion setzeSchriftgröße() {
var winWidth = $(window).width();
// Begrenzen Sie die Breite über 640
var Größe = (Fensterbreite / 640) * 100;
doc.documentElement.style.fontSize = (Größe < 100? Größe: 100) + 'px' ;
};
//Ausführung verhindern, wenn HTML nicht vollständig geladen ist, um die richtige Seitenbreite sicherzustellen
setTimeout( Funktion () {
// Initialisierung
setFontSize();
}, 200);
});

Abschließend möchte ich noch auf eine Falle hinweisen, die ich bei der Verwendung von rem zur Anpassung entdeckt habe: Wenn das HTML eine größere Schriftgröße festlegt, haben die Ränder und Abstände der Inline-Elemente innerhalb des Blockelements zusätzliche Werte. Die Lösung besteht darin, die Schriftgröße des äußeren Blockelements auf 0 zu setzen.

Die obige Methode zur Implementierung der adaptiven Größe mobiler Webseiten ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522958.html

<<: Detaillierte Erläuterung des automatischen Formatierungszeilenumbruchs von Vue Save

>>: MySQL-Unterabfrage und Details zur Verknüpfungstabelle

Schnelle Implementierung der Schritte zur Bereitstellung von Docker-Images in Intellij IDEA

So implementieren Sie die Größenanpassung mobiler Webseiten

Schnelle Implementierung der Schritte zur Bereitstellung von Docker-Images in Intellij IDEA

Einführung in die Parameter und Regeln für reguläre Ausdrücke bei Nginx

So stellen Sie eine Nextcloud-Netzwerkfestplatte mit Docker bereit

Grundlegende Ideen zum Auffinden von Fehlern in der Web-Frontend-Entwicklung

Detaillierte Erläuterung des Implementierungsprozesses der Dual-Master-Synchronisierung von Teiltabellen in MySQL 5.7

Dieser Artikel hilft Ihnen, den Quellcode von PReact10.5.13 zu verstehen

Vant+postcss-pxtorem implementiert Browser-Anpassungsfunktion

CnBlogs - Teilen im benutzerdefinierten Blogstil

Verwenden Sie das Ansichtsfenster im Meta-Tag, um das Bildschirm-CSS zu definieren

So implementieren Sie eine bidirektionale MySQL-Sicherung

Artikel empfehlen

JavaScript-Datenvisualisierung: ECharts-Kartenerstellung

Detaillierte Erklärung zur Implementierung des sekundären Caches mit MySQL und Redis

So installieren Sie JDK und legen Umgebungsvariablen in Linux fest (dieser Artikel reicht aus)

Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4

Detaillierte Erklärung zu sinnvollen Einstellungen des MySQL sql_mode

Navicat-Verbindung MySQL Fehlerbeschreibungsanalyse

Datenbank löschen und weglaufen? So sichern Sie die MySQL-Datenbank mit xtraback

Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen

So erstellen Sie einen NFS-Dienst in Ubuntu 16.04

Eine einfache Möglichkeit, das Passwort in MySQL 5.7 zu ändern

Unverzichtbares Wissen für Vorstellungsgespräche und schriftliche Tests im Bereich Webentwicklung (Pflichtlektüre)

So beheben Sie den Verbindungsfehler zur Datenbank beim Start von ServerManager

DOCTYPE Dokumenttypdeklaration (unbedingt lesenswert für Webseiten-Liebhaber)

JavaScript zum Erzielen des JD.com-Blitzverkaufseffekts

So implementieren Sie die Unschärfefunktion von DIV