CSS Media Types

CSS Media Types nos permite establecer propiedades CSS personalizadas según el medio donde se esté mostrando nuestra página web.

Como ejemplo, en Twitter Bootstrap lo utilizan de la siguiente manera:

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Lista con todos los Media Types:
all – Se utiliza para todos los dispositivos
aural – Se utiliza para la voz y los sintetizadores de sonido
braille – Se utiliza para los dispositivos táctiles braille
embossed – Se utiliza para impresoras braille paginados
handheld – Se utiliza para los dispositivos pequeños o de mano
print – Se utiliza para imprimir en impresoras
projection – Se utiliza para las presentaciones proyectadas, como diapositivas
screen – Se utiliza para las pantallas de ordenador
tty – Se utiliza para los medios de comunicación mediante una cuadrícula de caracteres de ancho fijo, como teletipos y terminales
tv – Se utiliza para los dispositivos de tipo televisión

Ejemplo de uso:

@media screen
  {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
  }
@media print
  {
  p.test {font-family:times,serif;font-size:10px;}
  }
@media screen,print
  {
  p.test {font-weight:bold;}
  }

Aparte, tenemos el atributo media en el tag link que nos permite establecer hojas de estilos dinámicas según el dispositivo. Ver Aquí.