HTML5 Media Queries

Rodolfo Finochietti

Problema

• Muchos dispositivos• Muchas resoluciones• Muchos tamaños de pantalla

Antes

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

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.

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"/>

Demo

Media Queries

¿Preguntas?

rodolfof@lagash.com http://twitter.com/rodolfof

http://shockbyte.net

¡GRACIAS!