• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 Media Queries
 

HTML5 Media Queries

on

  • 2,239 views

Introducción a HTML5 Media Queries

Introducción a HTML5 Media Queries

Statistics

Views

Total Views
2,239
Views on SlideShare
753
Embed Views
1,486

Actions

Likes
0
Downloads
6
Comments
0

2 Embeds 1,486

http://shockbyte.net 1485
http://inoreader.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 Media Queries HTML5 Media Queries Presentation Transcript

    • 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"/>
    • DemoMedia Queries
    • ¿Preguntas?
    • rodolfof@lagash.comhttp://twitter.com/rodolfof http://shockbyte.net ¡GRACIAS!