Algunos apuntes sobre @media queries

Asusta, lo sé. Hasta que te das cuenta de lo fácil que es hacer que tu sitio web sea responsivo o adaptativo para cualquier navegador que soporte las media queries: IE8 no lo soporta. Pero tranquilo, todos los navegadores móviles actualmente las soportan, y como el reponsivo nos interesa especialmente para ellos, no vamos a tener ningún problema.

Una lista “bastante completa” de lo que podemos utilizar para los distintos dispositivos sería esta:

 

Pero por supuesto que podemos definir cada tamaño según nos plazca. Podemos especificar cada móvil concreto como el iPhone 5, 4…

Es lo único que debemos añadir al CSS para que según las condiciones del ancho de la pantalla el navegador tenga en cuenta estas reglas CSS o no. Muy sencillo.

Por supuesto, existen otras maneras de manejar las media queries, con más parámetros, es cuestión de investigar.

Una cosa recomendable de cara a la analítica web, sería hacer que sólo se cargue el css específico para cada tamaño de pantalla, así rebajamos el peso del CSS que tienen que cargar los móviles, pues no estaríamos cargando el css que contempla todos los dispositivos, sino solamente el que infiera directamente con él. podemos usar algo como:

 

Si queremos dar soporte a antiguos navegadores podemos añadir específicamnte un CSS para ellos usando:

Por supuesto, esto no es más que un puñado de ejemplos para empezar con las media queries, si quieres ver cómo funcionan exactamente las media queries tienen toda la información “oficial”, en la página de mozilla: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Eso es todo. Si te gusta lo que ves, pon un comentario,
gracias! :)

5 Comments , ,