> Manuales > Tutorial de CSS básico

Explicamos la regla @media permite definir estilos CSS específicos para distintos medios en los que se pueda mostrar una página web.

Una página web se puede mostrar en diferentes dispositivos. Esto es algo que ya conocemos y que, a medida que pasan los años y avanzan las tecnologías, se hace cada vez más patente. Por tanto, podemos dejar de pensar que nuestra web se va a acceder simplemente desde un ordenador y para ayudarnos a que se vea bien en cualquier dispositivo, podemos definir estilos distintos para cada tipo de medio con la regla @media.

Incluso en el hipotético caso que descartéis que vuestra web pueda tener usuarios venidos de teléfonos móviles o televisiones (por poner un par de ejemplos), puede que necesitéis especificar estilos específicos para cuando la página web se está imprimiendo en papel. Todo ello son tipos de medios distintos, que podemos gestionar desde la llegada de CSS 2.

Sintaxis y usos de la regla @media de CSS 2

La regla @media permite especificar estilos para distintos tipos de medios en la misma hoja de estilos. En ella podemos informar sobre los tipos de medio sobre los que queremos definir estilos CSS. Por ejemplo, podríamos escribir estilos para tipos de medios como la impresión o estilos para el medio pantalla del ordenador.

Para definir un estilo para un tipo de medio, o medios, específicos podemos escribir la regla @media seguida de los tipos de medios sobre los que queremos aplicar los estilos, separados por comas.

Así definiríamos estilos que funcionarían sólo en la impresión en papel:

@media print {
   table{
      width: 90%;
      border: 2px solid #ff000;
   }
   .miclase{
      display: none;
   }
}

Como decíamos, podemos indicar estilos CSS para varios medios a la vez:

@media tv, handheld {
   body{
      font-size: 0.5 em;
   }
}

Además, si lo deseamos, podemos especificar estilos para todos los medios, con el tipo de medio "all".

@media all {
   div.imprimir {
      display: hidden;
   }
}
Nota: Aparte de la regla @media que estamos explicando existe una manera de especificar estilos definidos en archivos externos, que sólo se apliquen para determinados tipos de medios. Esto se hace con la directiva "media" que se aplica en la etiqueta LINK para enlazar con una hoja de estilos externa, en el atributo "media".
<link media="print" href="css_solo_para_impresion.css" rel="stylesheet" type="text/css">

Para más información, por favor, accede al artículo CSS para imprimir páginas web.

Tipos de medios en CSS 2

Ahora podemos ver un listado de los tipos de medios que se definen en las especificaciones del lenguaje CSS 2.

Nota: Al escribir los tipos de medios es indiferente si lo hacemos con mayúsculas o minúsculas.

Estos tipos de medios son los que eran válidos con las especificaciones de CSS 2. Es obvio que con el paso del tiempo se crearán otros tipos de medios que se irán incorporando al lenguaje. Si se utiliza un tipo de medio que no existe o que no es reconocido, el sistema simplemente lo ignora. Por ejemplo:

@media tv, nevera{
   p{
      background-color: #ccc;
   }
}

Esta declaración de estilos sólo se aplica en las televisiones y en los monitores acoplados en las neveras de la cocina. Como en estos momentos no existe el tipo de medio "nevera", pues simplemente se ignora y en la práctica ese estilo sólo servirá para cuando se muestre la página en un televisor.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual