HTML5 Media Queries

2,194 views

Published on

Introducción a HTML5 Media Queries

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,194
On SlideShare
0
From Embeds
0
Number of Embeds
1,561
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Media Queries

  1. 1. HTML5 Media Queries Rodolfo Finochietti
  2. 2. Problema• Muchos dispositivos• Muchas resoluciones• Muchos tamaños de pantalla
  3. 3. Antes• HTML4 incorporaba una característica que nos permitía definir hojas de estilo diferentes según un tipo de los dispositivo
  4. 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. 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. 6. DemoMedia Queries
  7. 7. ¿Preguntas?
  8. 8. rodolfof@lagash.comhttp://twitter.com/rodolfof http://shockbyte.net ¡GRACIAS!

×