Lassen Sie den IE CSS3 Media Query unterstützen, um responsives Webdesign zu erreichen
|
Die heutigen Bildschirmauflösungen reichen von 320 Pixeln (iPhone) bis zu 2560 Pixeln oder sogar mehr (große Monitore), wobei die Variationsbreite enorm ist. Zusätzlich zum Einsatz herkömmlicher Desktop-Computer durchsuchen Benutzer Webseiten zunehmend über Mobiltelefone, Netbooks und Tablet-Geräte wie iPads. In diesem Fall wird das Design mit fester Breite zunehmend unvernünftig. Die Seite muss anpassungsfähiger sein und ihre Layoutstruktur muss reaktionsfähig und an unterschiedliche Geräte und Bildschirmauflösungen anpassbar sein. Als Nächstes lernen wir, wie man geräte- und browserübergreifende responsive Webdesign-Lösungen mithilfe von HTML5- und CSS3-Media-Queries-Technologien implementiert. Code kopieren Der Code lautet wie folgt:<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--> Als nächstes müssen wir ein CSS-Stylesheet erstellen und es auf der Seite aufrufen: Code kopieren Der Code lautet wie folgt:<link href="media-queries.css" rel="stylesheet" type="text/css"> Elastische Bilder Code kopieren Der Code lautet wie folgt:img {max-width:100%;height:auto;width:auto\9; /* ie8 */} Was bedeutet width: auto\9 in CSS? Code kopieren Der Code lautet wie folgt:Dies ist ein Hack für den IE. Wirksam in IE6/IE7/IE8/IE9/IE10 „\0“ ist wirksam in IE8/IE9/IE10 „\9\0“ ist wirksam in IE9/IE10 Elastische Inline-Elemente (Video) Code kopieren Der Code lautet wie folgt:.video einbetten, .video Objekt, .video Iframe {Breite: 100 %; Höhe: auto;} Das Problem der automatischen Schriftgrößenanpassung (deaktivieren Sie die automatische Schriftgrößenanpassung in Safari auf dem iPhone über -webkit-text-size-adjust:none) Code kopieren Der Code lautet wie folgt:html{-webkit-text-size-adjust:none;} Problem mit der Skalierung der Seitenbreite Code kopieren Der Code lautet wie folgt:<meta name="viewport" content="width=Gerätebreite, benutzerskalierbar=nein, Anfangsmaßstab=1,0; Maximalmaßstab=1,0; benutzerskalierbar=0;"> Der Originalartikel wurde aus der WEB-Frontend-Entwicklung (www.css119.com) reproduziert. |
<<: Eine kurze Erläuterung des Navigationsfensters in Iframe-Webseiten
>>: Flexibles CSS-Layout FLEX, Medienabfrage und Implementierung von mobilen Klickereignissen
Artikel empfehlen
Detaillierte Erklärung der Unterschiede zwischen JS-Arrays „Finden“, „Some“, „Filtern“ und „Reduzieren“
Erkennen Sie die Unterschiede zwischen den Method...
8 wichtige JavaScript-Codefragmente für Ihr Projekt
Inhaltsverzeichnis 1. Holen Sie sich die Dateierw...
Grundlegende Kenntnisse zur Verwendung von Miniprogrammen (sehr umfangreich, empfehlenswert!)
Inhaltsverzeichnis Was ist bei der Registrierung ...
Die Element-UI-Tabelle realisiert die Dropdown-Filterfunktion
In diesem Artikelbeispiel wird der spezifische Co...
So fügen Sie bei der Webseitenerstellung Webfont-Dateien Vektorsymbole hinzu
Wie wir alle wissen, gibt es in Computern zwei Art...
Detaillierte Erklärung der Anwendungsfälle von Vue-Listenern
Die erste Möglichkeit besteht darin, jQuery's...
Beispielcode zur Implementierung einer Kreisbahnanimation mit CSS3 und Tabellen-Tags
html: Tatsächlich werden mehrere durchgezogene Kr...
HTML-Tutorial: Horizontales Liniensegment in HTML
<br />Dieses Tag kann eine horizontale Linie...
Implementierung von Diensten im Docker für den Zugriff auf Hostdienste
Inhaltsverzeichnis 1. Szenario 2. Lösung 3. Fazit...
Javascript-Bereich und Abschlussdetails
Inhaltsverzeichnis 1. Geltungsbereich 2. Geltungs...
Detaillierte Erläuterung der Tabellenrückgabe- und Indexabdeckungsbeispiele in MySQL
Inhaltsverzeichnis Indextyp Indexstruktur Nicht g...
Eine kurze Diskussion über den Unterschied zwischen src und href in HTML
Einfach ausgedrückt bedeutet src „Ich möchte dies...
MySQL verwendet Trigger, um das Zeilenlimit der Tabelle in der Datenbank zu lösen. Detaillierte Erklärung und Beispiele
MySQL verwendet Trigger, um das Zeilenlimit der T...
Detaillierte Analyse, warum MySQL die Verwendung von UUID oder Snowflake-ID als Primärschlüssel nicht empfiehlt
Vorwort: Beim Entwerfen einer Tabelle in MySQL em...
Webdesign-Tipps: Einfache Regeln für das Seitenlayout
Wiederholung: Wiederholen Sie bestimmte Seitendes...