IE8 prendre en charge le CSS Media Query

Question

Ne IE8 pas en charge le code CSS suivant requête de média:

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

Si non, quel est l'autre façon d'écrire? La même fonctionne très bien dans Firefox.

Des problèmes avec le code ci-dessous?

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

Answer 1

css3-mediaqueries-js est probablement ce que vous cherchez: ce script émule des requêtes de média. Cependant (à partir du script du site), il "ne fonctionne pas sur @imported feuilles de style (que vous ne devriez pas utiliser de toute façon pour des raisons de performances). Également à ne pas écouter les médias attribut de l' <link> et <style> éléments".

Dans la même veine, vous avez le plus simple Respond.jsqui permet de min-width et max-width des requêtes de média.

Answer 2

Les versions d'Internet Explorer avant de IE9 ne prennent pas en charge les requêtes de média.

Si vous êtes à la recherche d'un moyen de dégradant la conception pour IE8 utilisateurs, vous pouvez trouver IE conditionnelle de commentaires utiles. En utilisant cela, vous pouvez spécifier un IE 8/7/6 feuille de style spécifique qui écrit sur le précédent règlement.

Par exemple:

<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]-->

Ce ne sera pas permettre une conception sensible dans IE8, mais pourrait être plus simple et plus accessible solution que d'utiliser un plugin JS.

Answer 3

La meilleure solution que j'ai trouvé est Respond.js surtout si votre principale préoccupation est de s'assurer que votre responsive design travaille dans IE8. Il est très léger à 1 lorsque min/format gzip et vous pouvez assurez-vous qu'IE8 clients de charge:

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

C'est aussi la méthode recommandée si vous êtes en utilisant bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

Answer 4

IE8 (et versions inférieures) et Firefox avant 3.5 ne prend pas en charge les requêtes de média et safari 3.2 partiellement en charge. il ya un couple de techniques qui utilisent JavaScript pour ajouter la prise en charge de ces navigateurs:

Les Media Queries plugin jQuery (traite uniquement avec max/min largeur)

css3-mediaqueries-js – une bibliothèque qui vise à ajouter des médias à l'appui de la requête pour non-soutenir les navigateurs

Answer 5

Pris de la css3mediaqueries.js page du projet.

Remarque: Ne fonctionne pas sur @import ed feuilles de style (que vous ne devriez pas utiliser de toute façon pour des raisons de performances). Également à ne pas écouter les médias attribut de l' <link> et <style> - éléments.