El uso de las media queries

Gracias a los avances de los distintos navegadores podemos tener una multitud de diseños CSS bien definidas y cada vez más ahorrando tiempo en su elaboración por sus implementaciones.

Debido a la evolución tecnológica, hoy en dia se utiliza mucho la tecnología móvil por lo que muchas de las personas, ya sea por rapidez o comodidad visitan las páginas web desde su dispositivo.

Lamentablemente, el insertar todo el contenido existente en la web dentro de un móvil - entiéndase por introducir, la forma de visualizar las páginas dentro del móvil - es bastante complejo.

A día de hoy se nos están poniendo un poco mejor las cosas gracias a los desarrolladores de dichos navegadores implementando soluciones que sean al final un estándar entendido por todos, por ello, una de las cosas que me gustaría hablar en las siguientes líneas es de las media queries, que gracias a ellas se puede trabajar bajo un CSS distintos tipos de dispositivos.

¿Qué es un "media query"?

Es una sentencia de código por el cual se pueden hacer una selección de estilos para los distintos tipos de navegadores y dispositivos, es decir, nosotros podemos crear un portal con unos estilos predefinidos de colores e imágenes, pero... ¿qué pasaría si esa misma web se mirase desde un dispositivo móvil (móvil o tableta) y no desde un ordenador?

Probablemente en la tableta se vea medianamente decente pero al llegar a visualizarla en un movil la cosa se hace imposible de ver y leer. Para lograr lo que estamos hablando con anterioridad debíamos recurrir a nuestro compañero, el javascript.

Manos a la obra

Una vez nos hemos introducido en la materia es hora de poner las manos sobre el teclado para empezar a practicar, pero no sin antes mencionar que el uso de este tipo de planteamientos solo funcionará con los navegadores más actuales. Si quieres que sea soportado para todos los navegadores, incluyendo a los antiguos, habrá que conseguir que funcione mediante el empleo de "hacks" que realicen las mismas funciones.

La mayor parte de las veces, el empleo de los media queries se encuentra dentro de nuestra hoja de estilo principal. Para hacer la invocación basta con escribir la sentencia @media:

    @media screen and (min-width: 1024px){
        /* Estilos para un tamaño superior de 1024px */
    }

En el código anterior se puede observar que todos los estilos que se encuentren dentro de la sentencia solo serán ejecutados cuando el tamaño de la pantalla sea de 1024px con lo que se restringe la página web a que sea visible en pantalla de ordenador.

Por eso si definimos unos estilos como los siguientes:

#content {
    color: red;
}
@media screen and (min-width: 1024px){
    #content {
        color: green;
    }
}

Cuando abramos nuestro explorador y modifiquemos el ancho podremos observar como el texto que se encuentra dentro de la capa "#content" cambia de color cuando pasa la frontera de los 1024px.

Si no quieres insertar las media queries dentro de una hoja de estilos, también se pueden referenciar de otras maneras, por ejemplo, colocando la sentencia cuando se hace la invocación a la hoja de estilos:

	[link tag] href="/mobile.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" [end link tag]

Con esta sentencia lo que sucede es que la hoja de estilos a la que hace referencia solo se cargaría en el caso de que el tamaño de la pantalla del dispositivo no tiene que sobrepasar la cantidad de pixeles indicada.

Más ejemplos...

Aquí os dejo unos cuantos ejemplos más sobre este tipo de programaciones con sus comentarios para que podais verlos y utilizarlos alguna vez que os hagan falta, Espero que os sean de utilidad:

    /* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) { }
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { }
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) { }
/* Large screens ----------- */
@media only screen and (min-width : 1824px) { }
/* iPhone 4 and high pixel ratio devices ----------- */
@media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) { }