Dispositivos para ver tu web - Media types y Media Queries

En CSS 2.1, podemos especificar hasta 10 tipos de dispositivos posibles:

- all ... apto para todos los dispositivos, es el valor por defecto
- aural / speech ... para sintetizadores de habla
- braille ... dispositivos que reciben feedback táctil en braille
- embossed ... para impresoras braille
- handheld ... para ordenadores de bolsillo (PDA, pantallas pequeñas, ...)
- print ... para material imprimible
- projection ... para presentaciones en proyector (por páginas, sólo visual, interactivo)
- screen ... para pantallas de ordenador en color
- tty ... para teletipos y terminales, no usar pixels como unidad,
- tv ... para televisores ( baja resolución, en color, movimiento limitado por la pantalla, sonido disponible)

En HTML4, se definen:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="estilo.css">

@media print { p { font-size: 14pt;}

@import url("otroestilo.css") screen;
(cuidado, los "media types" con @import son ignorados por IE5, IE6, IE7 e IE8)

En las recomendaciones para CSS3, se introduce el concepto Media Queries que amplía el control en el rendeado basado en algunas características más concretas de los dispositivos, por ejemplo el ancho de pantalla. La hoja de estilos CSS sólo será aplicable en el dispositivo especificado si la expresión es "verdadera".

<link rel="stylesheet" media="screen and (color)" href="example.css" />
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
<link rel="stylesheet" media="screen and (device-height: 600px)" />


@import url(example.css) screen and (color), projection and (color);

<?xml-stylesheet media="all and (min-color-index: 256)"
href="http://www.example.com/..." ?>


@media screen and (color), projection and (color) { ... }

@media all and (orientation: portrait) { ... }
@media (orientation: portrait) { ... }
@media (min-width: 100px) { ... }
@media handheld and (min-width: 20em),
screen and (min-width: 20em) { ... }

@media screen and (device-aspect-ratio: 16/9) { ... }
@media screen and (device-aspect-ratio: 32/18) { ... }

@media tv and (scan: progressive) { ... }
@media tv and (scan: interlace) { ... }