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.

Wir müssen die Datei css3-mediaqueries.js auf der Seite aufrufen, damit IE8 oder frühere Versionen CSS3-Medienabfragen unterstützen:

Als nächstes müssen wir ein CSS-Stylesheet erstellen und es auf der Seite aufrufen:

Elastische Bilder

Was bedeutet width: auto\9 in CSS?

Elastische Inline-Elemente (Video)

Das Problem der automatischen Schriftgrößenanpassung (deaktivieren Sie die automatische Schriftgrößenanpassung in Safari auf dem iPhone über -webkit-text-size-adjust:none)

Problem mit der Skalierung der Seitenbreite