Introducción a HTML5 Media Queries

1. HTML5 Media Queries
Rodolfo Finochietti

2. Problema
• Muchos dispositivos
• Muchas resoluciones
• Muchos tamaños de pantalla

3. Antes
• HTML4 incorporaba una
característica que nos permitía
definir hojas de estilo diferentes
según un tipo de los dispositivo

4. Antes
• <link type="text/css" rel="stylesheet" media="screen,print"
href="screen_print.css" />
– all: versión para todos los dispositivos.
– braille: versión para dispositivos lectores de braille para invidentes.
– embossed: versión para dispositivos que imprimen braille.
– handheld: versión para terminales con pantalla pequeña y ancho de
banda limitada (móviles).
– print: versión para impresiones de página.
– projection: versión para proyectores.
– screen: versión para pantallas de ordenador.
– speech: versión para sintetizadores del habla.
– tty: versión para dispositivos para discapacitados, teletipos y
terminales.
– tv: versión para dispositivos de televisión.

5. Media Queries en HTML5
• En HTML5 podemos definir media
queries según el tamaño del área útil
de visualización del navegador (view
port)
– <link rel="stylesheet" type="text/css"
media="screen and (min-width: 700px)"
href="hoja.css"/>

6. Demo
Media Queries

7. ¿Preguntas?

8. rodolfof@lagash.com
http://twitter.com/rodolfof
http://shockbyte.net
¡GRACIAS!