Zusammenfassung relevanter Erkenntnisse zur Umsetzung adaptiven Webdesigns
|
Wie funktioniert „Adaptives Webdesign“? Eigentlich ist es gar nicht so schwierig. 1. Lassen Sie die Breite der Webseite automatisch anpassen: Fügen Sie zunächst eine Zeile mit einem Viewport-Meta-Tag zum Kopf des Webseitencodes hinzu. Code kopieren Der Code lautet wie folgt:<meta name="viewport" content="Anfangsmaßstab=1,0, Maximalmaßstab=1,0, Minimalmaßstab=1,0, Benutzerskalierung=0, Breite=Gerätebreite"/> Ansichtsfenster ist die Standardbreite und -höhe der Webseite. Die obige Codezeile bedeutet, dass die Breite der Webseite standardmäßig der Bildschirmbreite (Breite = Gerätebreite) entspricht und das ursprüngliche Skalierungsverhältnis (Anfangsmaßstab = 1) 1,0 beträgt, d. h. die Anfangsgröße der Webseite nimmt 100 % der Bildschirmfläche ein. Für die alten Browser IE6, 7, 8 ist eine JS-Verarbeitung erforderlich. Da die Hauptplattformen iOS und Android sind, können wir die fehlende Unterstützung von Opera vorübergehend ignorieren. 2. Verwenden Sie keine absolute Breite Da die Webseite ihr Layout entsprechend der Bildschirmbreite anpasst, können Sie kein Layout mit absoluter Breite oder Elemente mit absoluter Breite verwenden. Dies ist sehr wichtig. Insbesondere kann im CSS-Code keine Pixelbreite angegeben werden: Breite: xxx px; Zur Definition der Spaltenbreiten können ausschließlich Prozentwerte angegeben werden: Breite: xx%; oder: Breite: automatisch; oder: Verwenden Sie maximale Breite und maximale Höhe: max. Breite, max. Höhe; 3. Relative Schriftgröße Die Größe von Schriftarten kann nicht absolut (px), sondern nur relativ (em) festgelegt werden. Code kopieren Der Code lautet wie folgt:Körper { Schriftart: normal 100 % Helvetica, Arial, serifenlos; } Der obige Code gibt an, dass die Schriftgröße 100 % der Standardgröße der Seite beträgt, also 16 Pixel. Code kopieren Der Code lautet wie folgt:h1 { Schriftgröße: 1,5em; } Die Größe von h1 beträgt dann das 1,5-fache der Standardgröße, also 24 Pixel (24/16 = 1,5). Code kopieren Der Code lautet wie folgt:klein Schriftgröße: 0,875em; } Die Größe des kleinen Elements beträgt das 0,875-fache der Standardgröße, also 14 Pixel (14/16 = 0,875). 4. Fließendes Gitter „Fließendes Layout“ bedeutet, dass die Positionen jedes Blocks schwebend und nicht festgelegt sind. Code kopieren Der Code lautet wie folgt:.hauptsächlich { schweben: rechts; Breite: 70%; } .linkeLeiste { schweben: links; Breite: 25 %; } Der Vorteil von Float besteht darin, dass, wenn die Breite zu klein ist, um zwei Elemente aufzunehmen, das letztere Element automatisch an das Ende des ersteren gescrollt wird und nicht horizontal überläuft. Dadurch wird das Auftreten einer horizontalen Bildlaufleiste vermieden. Darüber hinaus müssen Sie bei der Verwendung der absoluten Positionierung (Position: absolute) sehr vorsichtig sein. 5. Der Kern des „adaptiven Webdesigns“ ist das von CSS3 eingeführte Media Query-Modul Das bedeutet, dass die Bildschirmbreite automatisch erkannt wird und dann die entsprechende CSS-Datei geladen wird. Medien="Bildschirm und (maximale Gerätebreite: 400px)" href="tinyScreen.css" /> Der obige Code bedeutet, dass die Datei tinyScreen.css geladen wird, wenn die Bildschirmbreite weniger als 400 Pixel beträgt (max-device-width: 400px). Medien="Bildschirm und (Mindestbreite: 400px) und (Maximalgerätebreite: 600px)" href="smallScreen.css" /> Wenn die Bildschirmbreite zwischen 400px und 600px liegt, wird die Datei smallScreen.css geladen. Zusätzlich zum Laden von CSS-Dateien mithilfe von HTML-Tags können Sie diese auch in vorhandene CSS-Dateien laden. @import url("tinyScreen.css") Bildschirm und (maximale Gerätebreite: 400px); 6. CSS @media-Regeln In derselben CSS-Datei können Sie auch je nach Bildschirmauflösung unterschiedliche CSS-Regeln anwenden. Code kopieren Der Code lautet wie folgt:@media screen und (max-device-width: 400px) { .Spalte { Schwimmer: keiner; Breite: automatisch; } #Seitenleiste { Anzeige: keine; } } Der obige Code bedeutet, dass, wenn die Bildschirmbreite weniger als 400 Pixel beträgt, der Spaltenblock nicht schwebt (float:none), die Breite automatisch angepasst wird (width:auto) und der Seitenleistenblock nicht angezeigt wird (display:none). Verwenden Sie ein lineares Design für Spalten und Floats: Code kopieren Der Code lautet wie folgt:@media screen und (max-width: 480px) { div,li { Anzeige: Block; Schwimmer: keine; Breite: 100 %; } }  7. Flüssiges Bild Beim „Responsive Webdesign“ muss neben Layout und Text auch eine automatische Skalierung der Bilder erreicht werden. Hierzu ist nur eine Zeile CSS erforderlich: img { max-width: 100%;} Diese Codezeile funktioniert auch für die meisten in Webseiten eingebetteten Videos und kann daher wie folgt geschrieben werden: img, Objekt { max-width: 100%;} Ältere IE-Versionen unterstützen die maximale Breite nicht, daher müssen Sie Folgendes schreiben: img { Breite: 100 %; } Darüber hinaus kann es beim Skalieren von Bildern auf der Windows-Plattform zu Bildverzerrungen kommen. Zu diesem Zeitpunkt können Sie versuchen, den proprietären Befehl des Internet Explorers zu verwenden: img { -ms-interpolation-mode: bikubisch; } Alternativ imgSizer.js von Ethan Marcotte. Code kopieren Der Code lautet wie folgt:addLoadEvent(Funktion() { var imgs = document.getElementById_x_x_x_x("Inhalt").getElementsByTagName("Bild"); imgSizer.collate(imgs); }); Wenn die Bedingungen es erlauben, ist es jedoch am besten, Bilder mit unterschiedlichen Auflösungen entsprechend der Bildschirmgröße zu laden. Hierzu gibt es viele Möglichkeiten, sowohl auf der Server- als auch auf der Clientseite. 8. Suchleiste für Startseiteninhalte, Produktkategorien, beliebte Produkte, Schlüsselwörter. 9. Vermeiden Sie horizontale Bildlaufleisten Manchmal verhindern Bilder oder andere Seitenelemente den normalen Fluss des Containerelements. Das folgende Skript kann dieses Verhalten leicht verhindern: Code kopieren Der Code lautet wie folgt:img,iframe {max-width:100%;box-sizing:border-box;}  |
<<: CSS3-Filtercode zum Erreichen des Grau- oder Schwarzmodus auf Webseiten
>>: Allgemeine Schreibbeispiele für MySQL- und Oracle-Batch-Insert-SQL
Artikel empfehlen
Eine kurze Diskussion über die Semantik von HTML und einige einfache Optimierungen
1. Was ist Semantisierung? Erklärung zum Bing-Wör...
CSS fixiert das Tag auf Containerebene (div...) an einer Position (ganz rechts auf der Seite)
Der Code sieht folgendermaßen aus: .Verfahren{ Ra...
Detaillierte Erläuterung des Produktionsprinzips des jQuery-Atemkarussells
In diesem Artikel wird der spezifische Prozess de...
HTML-Tabellen-Markup-Tutorial (14): Tabellenkopf
<br />In der HTML-Sprache können Sie der Tab...
Ausführliche Erklärung des Sperrmechanismus in MySQL InnoDB
Vorne geschrieben Eine Datenbank ist im Wesentlic...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27 winx64
In diesem Artikel wird die Installations- und Kon...
Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue
Die Betriebsumgebung dieses Tutorials: Windows 7-...
Zusammenfassung des JS-Ausführungskontexts und -umfangs
Inhaltsverzeichnis Vorwort Text 1. Konzepte im Zu...
So verschieben Sie den Datenspeicherort von mysql5.7.19 in Centos7
Szenario: Mit zunehmender Datenmenge ist die Fest...
Verwenden von Docker zum Erstellen statischer Website-Anwendungen (mehrere Möglichkeiten)
Es gibt viele Server, die statische Websites host...
Detaillierte Erläuterung der Implementierungsschritte von MySQL Dual-Machine Hot Standby und Load Balancing
Die MySQL-Datenbank verfügt nicht über einen inkr...
Detailliertes grafisches Tutorial zum Herunterladen und Installieren der VirtualBox-Software sowie zum Installieren und Bereitstellen in einer Linux-Umgebung
1. Laden Sie die VirtualBox-Software herunter und...
Detaillierte Erläuterung des Selinux-Grundkonfigurationstutorials unter Linux
selinux ( Security-Enhanced Linux) ist ein Linux-...
Installationsprozess von VMware vCenter 6.7 (grafisches Tutorial)
Hintergrund Ursprünglich wollte ich ein 6.7 Vcent...
Komprimierungs- und Optimierungsvorgänge für Docker-Images
Der Grund für die heutige Beliebtheit von Docker ...