Vor einer Woche habe ich ein PC-seitiges Projekt auf Basis von HTML-CSS abgeschlossen. In den letzten Tagen wurde ich mit der Entwicklung mobiler Endgeräte vertraut gemacht, die ebenfalls auf Basis von HTML-CSS abgeschlossen wurde. Obwohl es das erste Mal war, dass ich mit der Entwicklung mobiler Endgeräte in Kontakt kam, habe ich während des Entwicklungsprozesses auch die Entwicklungsschritte des PC-Terminals verfolgt. Schneiden Sie zunächst das Layout aus. Sie können auch zunächst einen Gesamtplan erstellen und analysieren, welche als Komponenten verwendet werden können. In diesem mobilen Terminalprojekt gibt es eine ganze Reihe von Teilen, die als Komponenten verwendet werden können. Dies verbessert unsere Entwicklungseffizienz. Das Hauptziel der mobilen Webentwicklung sind Handheld-Geräte. Der Unterschied zur PC-Entwicklung besteht also darin, dass keine Probleme mit der Browserkompatibilität berücksichtigt werden müssen, sondern die Anpassung an Geräte unterschiedlicher Größe.
1. Bei der Verwendung von Medien müssen wir zunächst den folgenden Code festlegen (im Head-Tag geschrieben):
Erklärung mehrerer Parameter dieses Codes:
width = device-width: width entspricht der Breite des aktuellen Geräts
initial-scale: Anfängliche Skalierung (Standardeinstellung ist 1,0)
Minimalmaßstab: Der minimale Maßstab, auf den der Benutzer zoomen darf (Standardeinstellung ist 1,0)
maximum-scale: Das maximale Verhältnis, auf das der Benutzer zoomen darf (Standardeinstellung ist 1,0)
Benutzerskalierbar: Ob der Benutzer manuell zoomen kann (Standard ist „Nein“, da wir nicht möchten, dass Benutzer die Seite vergrößern und verkleinern)
2. CSS-Medienabfrage
Geben Sie Stylesheet-Regeln für den angegebenen Medientyp und die Abfragebedingungen an. Legen Sie Anzeigeinhalte auf Geräten unterschiedlicher Größe fest.
Der obige Code beschreibt den Stil, wenn der Bildschirm kleiner oder gleich 960 Pixel ist. Wenn der Bildschirm kleiner oder gleich 960 Pixel ist, ist die Hintergrundfarbe der Seite schwarz.
