Videotutorial: Diseños flexibles con CSS3 media queries

Con la llegada de los tablets y el aumento de uso de los smartphones con distintas resoluciones y tamaños de pantalla, nos surge el problema de crear versiones móviles diferentes para cada dispositivo.

CSS3 nos trae una nueva herramienta para atacar este problema: los media queries. El funcionamiento de los media queries consiste en disponer de un único documento html para todas las versiones, y seleccionar una u otra hoja de estilo CSS dependiendo de algunos parámetros del dispositivo, principalmente la resolución de la pantalla. De esta manera eliminamos la necesidad de redireccionar a una versión móvil diferente de nuestro sitio, sino que cada dispositivo leerá un bloque de reglas CSS según su anchura.

En este videotutorial voy a enseñaros cómo utilizar los media queries mediante un sencillo ejemplo de diseño de tres columnas de contenido y un menú. Veremos cómo las columnas se reordenan según disminuimos el tamaño del navegador, y por lo tanto cómo se mostraría en dispositivos de ese tamaño.

Ver Demo CSS3 media queries

Ver screencast (duración: 8:03)

• Descargar videotutorial en alta calidad – MOV (22 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (18 MB)

Podéis encontrar todos los screencasts en la página de videotutoriales, o suscribiros al podcast de iTunes.

Aunque en el video no lo menciono, en lugar de definir los estilos dentro de los bloques @media, también podemos separarlos en distintas hojas de estilo y enlazarlos cambiando el atributo media, por ejemplo:

<link rel="stylesheet" href="principal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="iphone_version.css" type="text/css" media="screen and (max-width: 480px)" />

Si os interesa el tema os recomiendo leer este artículo de A List Apart: Responsive Web Design.

Creado el martes, 19 de octubre, 2010 a las 9:29 PM y archivado en CSS, Desarrollo Web, Diseño Web, Screencasts. Puedes seguir los comentarios de esta entrada a través del feed RSS 2.0. También puedes dejar un comentario, o trackback desde tu propia web.