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.

Compartir:

3 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?

Deja un comentario

Introduce tu información personal en el formulario, regístrate o identifícate usando twitter con el siguiente botón.

Time limit is exhausted. Please reload the CAPTCHA.

RSS iTunes podcast Twitter

Categorías

Enlaces

Archivos