Tipos de medios

Antes de introducirse con media queries, debemos ver los tipos de medios (media types) sorpota esta característica de CSS.

Cuando hablamos de medio, nos estamos refiriendo al soporte donde mostramos nuestro diseño.

Es posible aplicar estilos a un medio determinado utilizando @media. Por ejemplo:

@media screen {
  div { 
    width: 100%;
  }
}

Los posibles medios que se pueden especifiar son los siguientes:

• screen: monitores y pantallas.
• print: medio impreso (papel o PDF).
• all: monitores y medios impresos.

Por ejemplo, si solo queremos aplicar un estilo al medio impreso:

@media print {
  body {
    font-size: 12pt;
  }
}

El valor all es equivalente a no utilizar nada. Es decir, los dos bloques siguientes son equivalentes:

@media all {
  body {
    font-size: 12pt;
  }
}

body {
  font-size: 12pt;
}