Download - HTML5 Media Queries
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?