Compartir

Cómo lograr que Internet Explorer admita las media queries

Cómo lograr que Internet Explorer admita las media queries

Las media queries te permiten establecer de una forma muy sencilla estilos CSS distintos en una página web en función de la medida de la pantalla en la que se descarga, con lo que es muy útil a la hora de hacer un diseño web responsive, es decir, adaptado también a tablets y móviles y no solo a ordenadores. Por defecto, Internet Explorer, en sus versiones anteriores a la 9, no entiende este código; sin embargo, hay una forma de conseguirlo. En unComo.com te explicamos cómo lograr que Internet Explorer admita las media queries.

Pasos a seguir:
1

Como decimos, las media queries son una de las herramientas del diseño web responsive. En concreto, son un módulo CSS3 que posibilita que se especifiquen estilos distintos dentro de un página CSS en función del tipo de pantalla.

2

Aquí tenemos un ejemplo de media querie:

@media screen and (max-width : 1000px){

body{background-image: url('../img/fondomv.jpg');background-repeat:no-repeat;}

}

3

Con estas líneas de código que se escriben dentro de la hoja de estilos de la web, un documento .css, estamos indicando que en las plantallas de 1.000 píxeles o menos de ancho, la web tenga una determinada imagen de fondo.

4

Además de indicarle este código, podemos establecer muchos otros, como que el tipo de letra sea más grande, el formato del menú diferente, etc.

5

Como ejemplo, en la imagen se muestra la vista de una web en pantallas de más de 1.000 píxeles de ancho.

Cómo lograr que Internet Explorer admita las media queries - Paso 5
6

Y así se ve con distintos cambios de estilo aplicados gracias a las media queries.

Cómo lograr que Internet Explorer admita las media queries - Paso 6
7

La mayoría de los navegadores aceptan media queries, sin embargo, las versiones anteriores a Internet Explorer 9, no; lo que provoca que no cojan los cambios de estilo que se establecen.

8

Hay una forma muy sencilla de solventar este problema. Se trata de escribir el código que podéis ver en la imagen en el head de la página web afectada, no es la hoja de estilo, sino en la página html.

Cómo lograr que Internet Explorer admita las media queries - Paso 8
9

Espero que os haya sido útil y tened en cuenta la importancia de hacer diseño web responsive.

Si deseas leer más artículos parecidos a Cómo lograr que Internet Explorer admita las media queries, te recomendamos que entres en nuestra categoría de Internet.

Escribir comentario sobre Cómo lograr que Internet Explorer admita las media queries

¿Qué te ha parecido el artículo?
1 comentario
Su valoración:
Enmanuel
Buenas,
No se entiende muy bien el tema de las media queries en javaScript, yo he trabajado con las media queries con javascript (que no lo recomiendo en la medida de lo posible ya que de la otra manera es mas fácil) y hay que colocar escuchadores y demás, pero no aclaras nada solo pones el código y no dices si hay que configurar algo, si hay que nombrar el archivo de media queries para que le afecte, en fin nada de nada, en definitiva tu artículo no esclarece nada.

Cómo lograr que Internet Explorer admita las media queries
1 de 4
Cómo lograr que Internet Explorer admita las media queries

Volver arriba