Soporte IE8 para CSS Media Query

Css3-mediaqueries-js es probablemente lo que está buscando: este script emula consultas de medios. Sin embargo (desde el sitio del script) "no funciona en hojas de estilo ed @import (que no debería usar de todos modos por razones de rendimiento). Tampoco escuchará el atributo media de los elementos <link> y <style>".

En la misma línea tienes la respuesta más simple .js , que solo habilita las consultas de medios min-width y max-width.

La mejor solución que he encontrado es Responder.js especialmente si su principal preocupación es asegurarse de que su diseño sensible funciona en IE8. Es bastante ligero a 1kb cuando min / gzipped y puede asegurarse de que solo los clientes IE8 lo carguen:

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

También Es el método recomendado si estás usando bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

IE8 (y versiones inferiores) y Firefox anteriores a 3.5 no admiten media query. Safari 3.2 lo soporta parcialmente.

Hay algunas soluciones que usan JavaScript para agregar soporte de media query a estos navegadores. Prueba estos:

Media Queries jQuery plugin (solo se ocupa del ancho máximo/mínimo)

Css3-mediaqueries – js-una biblioteca que tiene como objetivo agregar soporte de consulta de medios a los navegadores que no son compatibles

Tomado de las css3mediaqueries.página del proyecto js.

Nota: No funciona en las hojas de estilo @import'ed (que no debe usar de todos modos por razones de rendimiento). Tampoco escuchará el atributo media de los elementos <link> y <style>.

Una manera fácil de usar el css3-mediaqueries-js es incluir lo siguiente antes de la etiqueta de cuerpo de cierre:

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

Respuesta editada: IE entiende solo pantalla e impresión como medio de importación. Todos los demás CSS suministrados junto con la instrucción import hacen que IE8 ignore la instrucción import. Navegador Geco como safari o mozilla no tenía este problema.

Consultas de medios no son compatibles en absoluto en IE8 y por debajo.

Una solución basada en Javascript

Para agregar soporte para IE8, puede usar una de varias soluciones de JS. Por ejemplo, Responder se puede agregar para agregar soporte de media query para IE8 solo con el siguiente código:

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

CSS Mediaqueries es otra biblioteca que hace lo mismo. El código para agregar esa biblioteca a su HTML sería idéntico :

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

La alternativa

Si no le gusta una solución basada en JS, también debe considerar agregar una hoja de estilos solo IE

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

Nota :

Técnicamente es una alternativa más: usar Hacks CSS para apuntar IE

Antes de Internet Explorer 8 no había soporte para consultas de medios. Pero dependiendo de su caso, puede intentar usar comentarios condicionales para dirigirse solo a Internet Explorer 8 y versiones inferiores. Solo tienes que usar una arquitectura de archivos CSS adecuada.

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

Usé @media \0screen {} y funciona bien para mí en IE8 REAL.

IE no agregó soporte de media query hasta IE9. Así que con IE8 no tienes suerte.