Responsive Webdesign: Media Queries auch im IE6, IE7, IE8 … nutzen

internet-explorer-media-queries

Der Begriff des "Responsive Webdesign" beschreibt die Technik über CSS3 Media Queries eine Website für verschiedene Displaygrößen oder Bildschirmauflösungen zu optimieren. Wie das im Detail funktioniert habe ich bereits in einem Tutorial ausführlich erklärt. Leider unterstützt der Internet Explorer 6-8 keine Media Queries; folglich wird die optimierte Version der Website auch nicht angezeigt wenn der Besucher mit einem veralteten Internet Explorer unterwegs ist.
Nun könnte man einwenden, dass Media Queries in erster Linie für die Optimierung auf Smartphones genutzt werden und die Optimierung auf Desktop-Rechnern nicht so wichtig ist. Sicher ist die Optimierung für Handys und Tablets wichtiger - aber auch Desktop-Rechner und Notebooks unterscheiden sich in der Displaygröße mittlerweile deutlich und sollten bei der Konzeption entsprechend beachtet werden. Ein kleines JavaScript namens "respond.js" rüstet die fehlende Interpretation von min/max-width-Media Queries im Internet Explorer nach.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Details zu respond.js

Das Script rüstet lediglich die fehlende Kompatibilität für minimale und maximale Breitenangaben in Media Queries nach. Andere Media Query-Funktionen werden nicht berücksichtigt. respond.js erkennt darüber hinaus keine Media Queries in über @import importieren Stylesheets oder innerhalb von Inline-CSS.
Wenn ihr das Script Modernizr verwendet, beachtet bitte das im Download von Modernizr eine Haken bei »Media Queries« gesetzt werden kann. Ist die Option aktiviert, lädt Modernizr automatisch respond.js. Es ist also überflüssig das Script separat noch einmal einzubinden.

Download respond.js

respond.js liegt in der Quellversion sowie in einer komprimierten Version auf GitHub bereit. Darüber hinaus existiert auch ein WordPress-Plugin das ich der Vollständigkeit halber auch erwähnen möchte. Ob es sinnvoll ist eine solche Funktion per Plugin nachzurüsten sollte jeder selbst entscheiden. Ich bin der Meinung die Funktion gehört direkt ins Theme.

Alternative: css3-mediaqueries.js

Wenn ihr Media Query-Funktionen nutzen möchtet die von respond.js nicht abgedeckt werden, schaut euch am besten das umfangreichere Script css3-mediaqueries.js an.