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
So implementieren Sie die autorisierte WeChat-Anmeldung elegant in einem Vue3-Projekt
Inhaltsverzeichnis Vorwort Vorbereiten Umsetzungs...
Detaillierte Erklärung der Lösung für den Fehler von VMware, das Modul diskearly zu öffnen
VMWare (Virtual Machine Ware) ist ein Softwareunt...
Optimieren Sie MySQL mit 3 einfachen Tricks
Ich erwarte nicht, ein erfahrener Datenbankadmini...
Implementierungsbeispiel für ein JS-natives zweispaltiges Shuttle-Auswahlfeld
Inhaltsverzeichnis Verwendung Strukturzweige Code...
Detaillierte Schritte für QT zum Herstellen einer Verbindung zur MySQL-Datenbank
Der erste Schritt besteht darin, das entsprechend...
Analyse und Zusammenfassung der Auswirkungen von MySQL-Transaktionen auf die Effizienz
1. Datenbanktransaktionen verringern die Datenban...
So stellen Sie per SSH eine Verbindung zum Docker-Server her
Als ich zum ersten Mal mit Docker in Berührung ka...
Detaillierte Erklärung der Verwendung und Unterschiede von MySQL-Ansichten und -Indizes
MySQL-Ansichten Einfach ausgedrückt ist eine MySQ...
Vue-Vorlagenkonfiguration und Webstorm-Codeformatspezifikationseinstellungen
Inhaltsverzeichnis 1. Einstellungen für die Spezi...
Beispielcode zur Implementierung der Schnittstellensignatur mit Vue+Springboot
1. Umsetzungsideen Der Zweck der Schnittstellensi...
So verwenden Sie den Vue-Filter
Inhaltsverzeichnis Überblick Filter definieren Ve...
Detaillierte Erläuterung des MySql-Beispiels für automatische Kürzung
Detaillierte Erläuterung des MySql-Beispiels für ...
Beispielcode für die Verwendung von @media in CSS3 zur Anpassung einer Webseite
Heutzutage wird die Bildschirmauflösung von Compu...
Analyse gängiger Anwendungsbeispiele von MySQL-Prozessfunktionen
Dieser Artikel veranschaulicht anhand von Beispie...
Wie erhält das WeChat Mini-Programm gleichzeitig Benutzerinformationen und Benutzertelefonnummern?
Als ich heute die Anmeldeseite geschrieben habe, ...