Regla @media de CSS

  • Por
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.

  • All: Cualquier tipo de medio.
  • Braille: medio relacionado con dispositivos táctiles braile.
  • Embossed: Para impresoras braile.
  • Handheld: para dispositivos de bolsillo o de mano que normalmente tienen una pantalla pequeña.
  • Print: medio específico para cuando se imprimen documentos en la impresora. Desde la vista previa para imprimir que tienen los navegadores, generalmente en el menú de Archivo, también podemos ver el resultado de la página para impresión que utiliza los estilos CSS del tipo de media "print".
  • Projection: tipo de medio que se aplica para las presentaciones que se muestran con proyector.
  • Screen: medio que se utiliza para pantallas grandes, generalmente las pantallas de los ordenadores personales.
  • Speech: medio para sintetizadores de voz.
  • Tty: tipo de medio que se utiliza en dispositivos que tienen un tamaño fijo de carácter, como un teletipo, terminal, consola de comandos etc. En este tipo de media no se puede usar la unidad de medida de píxeles (px) porque todo lo que se puede mostrar es a nivel de carácter.
  • Tv: para cuando se accede a una web desde un dispositivo de televisión.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

MIguel

05/10/2010
Identifican el dispositivo?
Estas reglas se aplican directamente al cambiar de dispositivo? como detectan el dispositivo?

Es decir, si yo tengo dos css, uno normal y otro para móvil, el navegador cogerá automáticamente el que mas le conviene, o tendré que incluir otro tipo de condicionales?

israelpg

16/5/2011
El display imagino que debe ser none
El atributo que habéis indicado en el display no se corresponde. Habéis puesto hidden, cuando eso sería sólo válido para visibility. Lo correcto es display: none;

Jhonatan

20/4/2014
Creo que no funciona
Hola, no se si es que estoy haciendo algo mal pero creo que no funciona. Uso Prestashop y he insertado el siguiente texto en el archivo lcsglobal.css:
@media handheld {
html{
background: none;
margin: 0px auto;
overflow-x: hidden;
}
}

Con que intento con el es que la web no tenga fondo cuando se ve desde tablet porque ese fondo queda fuera de la pantalla y lo que hace es ralentizar la web.