CSS: Media Types, o cambiar de estilo según el medio donde vamos a mostrar nuestra web

Media Types nos permite especificar cómo se va a mostrar nuestra web dependiendo del medio donde la mostremos. No es lo mismo mostrar nuestra web en una pantalla de ordenador que en una impresora o en un dispositivo de Braille.

¿Cómo utilizamos esta posibilidad? Muy sencillo:

<style>

@media screen

{

p.testeando {font-family:verdana; font-size:10px}

}



@media print

{

p.testeando {font-family:arial; font-size:15px}

}



@media screen,print

{

p.testeando {font-weight:bold}

}



</style>





<p class="testeando">

Esto es una prueba :)



</p>

En este ejemplo veríamoscómo cuando imprimimos la página el texto del párrafo con la clase testeando no sale igual en pantalla que en la página imprimida.

¿Qué tipos de media hay?:

all: Para todos los medios
aural: Para voces sintetizadas
braille: Para dispositivos Braille
embossed: Para impresoras Braille
handheld: Para dispositivos con pantalla pequeña cómo una PDA
print: Para impresoras
projection: Para presentaciones
screen: Para pantallas de computadoras
tty: Para medios que imprimen por puntos en un grid como por ejemplo un teletipo.
tv: Para televisiones.