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)

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.

4 comentarios para “Videotutorial: Diseños flexibles con CSS3 media queries”

  1. […] This post was mentioned on Twitter by programania and Eduardo, David Rojas. David Rojas said: Nuevo en el blog: 'Videotutorial: Diseños flexibles con CSS3 media queries' http://bit.ly/alEvwG […]

  2. alex dice:

    Muchas gracias 😀 exelente contenido

  3. Pregunta Profe dice:

    Estimado David gracias x el video, me doy cuenta que hace dos años publicaste este artículo, como crees que es ahora la compatibilidad con el responsive desgign?

  4. 日内交易 dice:

    日内交易

    blog topic

Deja un comentario

Time limit is exhausted. Please reload the CAPTCHA.

RSS iTunes podcast Twitter

Categorías

Enlaces

Archivos