IE8-Unterstützung für CSS Media Query

Unterstützt IE8 die folgende CSS-Medienabfrage nicht:

@import url("desktop.css") screen and (min-width: 768px);

Wenn nicht, wie wird alternativ geschrieben? Das gleiche funktioniert gut in Firefox.

Probleme mit dem folgenden Code?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

Internet Explorer-Versionen vor IE9 unterstützen keine Medienabfragen .

Wenn Sie nach einer Möglichkeit suchen, das Design für IE8-Benutzer zu verschlechtern, sind die bedingten Kommentare des IE möglicherweise hilfreich. Auf diese Weise können Sie ein IE 8/7/6-spezifisches Stylesheet angeben, das die vorherigen Regeln überschreibt.

Beispielsweise:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

Dies ermöglicht kein reaktionsschnelles Design in IE8, könnte jedoch eine einfachere und zugänglichere Lösung sein als die Verwendung eines JS-Plugins.

css3-mediaqueries-js ist wahrscheinlich das, wonach Sie suchen: Dieses Skript emuliert Medienabfragen. Allerdings (von der Website des Skripts) funktioniert es nicht mit @importEd-Stylesheets (die Sie aus Leistungsgründen sowieso nicht verwenden sollten). Hört auch nicht auf das Medienattribut der Elemente <link>und <style>.

In der gleichen Weise haben Sie die einfachere Respond.js , die nur min-widthund max-widthMedienabfragen aktiviert .

Die beste Lösung, die ich gefunden habe, ist Respond.js, insbesondere wenn Ihr Hauptanliegen darin besteht, sicherzustellen, dass Ihr responsives Design in IE8 funktioniert. Es ist mit 1 KB ziemlich leicht, wenn min / gzipped und Sie können sicherstellen, dass nur IE8-Clients es laden:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

Dies ist auch die empfohlene Methode, wenn Sie Bootstrap verwenden: http://getbootstrap.com/getting-started/#support-ie8-ie9

IE8 (und niedrigere Versionen) und Firefox vor 3.5 unterstützen keine Medienabfrage. Safari 3.2 unterstützt dies teilweise.

Es gibt einige Problemumgehungen, die JavaScript verwenden, um diesen Browsern Unterstützung für Medienabfragen hinzuzufügen. Probiere diese:

JQuery-Plugin für Medienabfragen (behandelt nur die maximale / minimale Breite)

css3-mediaqueries-js - eine Bibliothek, die nicht unterstützten Browsern Medienabfrageunterstützung hinzufügen soll

Entnommen der Projektseite css3mediaqueries.js.

Hinweis: Funktioniert nicht mit @ importierten Stylesheets (die Sie aus Leistungsgründen sowieso nicht verwenden sollten). Hört auch nicht auf das Medienattribut der Elemente <link>und <style>.

Eine einfache Möglichkeit, css3-mediaqueries-js zu verwenden, besteht darin, vor dem schließenden Body-Tag Folgendes anzugeben:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

Bearbeitete Antwort: IE versteht nur Bildschirm und Druck als Importmedium. Alle anderen CSS, die zusammen mit der Importanweisung bereitgestellt werden, bewirken, dass IE8 die Importanweisung ignoriert. Geco Browser wie Safari oder Mozilla hatten dieses Problem nicht.

Medienabfragen werden in IE8 und darunter überhaupt nicht unterstützt.

Eine Javascript-basierte Problemumgehung

Um Unterstützung für IE8 hinzuzufügen, können Sie eine von mehreren JS-Lösungen verwenden. Beispielsweise kann Respond hinzugefügt werden, um die Unterstützung für Medienabfragen für IE8 nur mit dem folgenden Code hinzuzufügen:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries ist eine weitere Bibliothek, die dasselbe tut. Der Code zum Hinzufügen dieser Bibliothek zu Ihrem HTML-Code ist identisch:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Die Alternative

Wenn Sie eine JS-basierte Lösung nicht mögen, sollten Sie auch ein Stylesheet nur für IE <9 hinzufügen, in dem Sie Ihr Styling speziell für IE <9 anpassen. Dazu sollten Sie Ihrem Code folgenden HTML-Code hinzufügen:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Hinweis :

Technisch gesehen ist es eine weitere Alternative: Verwenden von CSS-Hacks als Ziel für IE <9. Es hat die gleiche Wirkung wie ein Stylesheet nur für IE <9, dafür benötigen Sie jedoch kein separates Stylesheet. Ich empfehle diese Option jedoch nicht, da sie ungültigen CSS-Code erzeugen (was nur einer von mehreren Gründen ist, warum die Verwendung von CSS-Hacks heutzutage allgemein verpönt ist).

Vor Internet Explorer 8 gab es keine Unterstützung für Medienabfragen. Abhängig von Ihrem Fall können Sie jedoch versuchen, bedingte Kommentare zu verwenden, um nur auf Internet Explorer 8 und niedriger abzuzielen. Sie müssen nur eine ordnungsgemäße CSS-Dateiarchitektur verwenden.

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Ich habe verwendet @media \0screen {}und es funktioniert gut für mich in REAL IE8.

IE hat die Unterstützung für Medienabfragen erst in IE9 hinzugefügt. Mit IE8 haben Sie also kein Glück.