Diseño responsive: los parámetros de las media queries

Web mediaquerie.es

El diseño responsive es una tendencia ineludible en la creación web. Conseguir que nuestras webs se muestren adaptadas a tablets y dispositivos móviles es imprescindible cuando todas las estadísticas constatan el uso cada vez mayor de estos aparatos.

Bien, pues las media queries son un módulo de CSS3 que nos echan una mano a la hora de lograr, a base de cambiar los estilos de determinados elementos, que la web se adapte a distintas pantallas. En esta web podréis ver los efectos que se pueden conseguir.

La sintaxis de las media queries es como veis en el siguiente código, escrito en el documento .css que se corresponde con la página .html:

@media screen and (max-width : 1000px){  .selectorcss {color:red;}  }

Con esto, indicamos un estilo especial para las pantallas de una anchura de hasta 1.000 píxeles. Entre los corchetes de las media queries podemos escribir todo el código css que queramos para conseguir adaptar la página web a la pantalla en cuestión.

Pues bien, ahora recojo algunos de los parámetros que se pueden emplear para especificar cuándo tienen efecto las media queries:

• width: anchura de la ventana del navegador.
• height: altura de la ventana del navegador.
• device-width: anchura del dispositivo.
• device-height: altura del dispositivo.
• orientation (portrait/landscape): dispositivo móvil en apaisado o en vertical.
• resolution: densidad de píxeles.

Excepto la orientación, el resto de parámetros admiten los valores «max» y «min».

La mayor parte de las versiones de Internet Explorer no entienden las media queries, pero en este artículo os explico cómo solventarlo. Este post es una pequeña aproximación a las mismas, os recomiendo esta lectura sobre introducción a las media queries con Css3 por si queréis saber más. ¡Hasta la semana que viene!