HTML <link> mediaAtributos
Ejemplos
Dos hojas de estilo diferentes para dos tipos de medio diferentes (pantalla de computadora e impresión):
<head>
<link rel="stylesheet" type="text/css" href="theme.css.html">
<link rel="stylesheet" type="text/css" href="print.css.html" media="print">
</head>
<link rel="stylesheet" type="text/css" href="theme.css.html">
<link rel="stylesheet" type="text/css" href="print.css.html" media="print">
</head>
Pruébalo »
Soporte del navegador
Todos los navegadores principales soportan el atributo media.
Definición y uso
El atributo media especifica en qué dispositivo se mostrará el documento enlazado.
Este atributo se usa normalmente con hojas de estilo CSS para especificar diferentes estilos para diferentes tipos de medio.
El atributo media acepta varios valores.
Diferencias entre HTML 4.01 y HTML5
El atributo media ahora soporta más valores.
Sintaxis
<link media="value">
Operadores posibles
| Valor | Descripción |
|---|---|
| and | Especifica un operador AND. |
| not | Especifica un operador NOT. |
| , | Especifica un operador OR. |
Dispositivos
| Valor | Descripción |
|---|---|
| all | Por defecto. Se aplica a todos los dispositivos. |
| aural | Sintetizador de voz. |
| braille | Dispositivo de retroalimentación braille. |
| handheld | Dispositivos de mano (pantalla pequeña, ancho de banda limitado). |
| projection | Proyector. |
| Modo de vista previa de impresión / página impresa. | |
| screen | Pantalla de computadora. |
| tty | Teletipo y medios similares que utilizan una cuadrícula de caracteres de ancho fijo. |
| tv | Dispositivos tipo televisor (baja resolución, capacidad de desplazamiento limitada). |
Valor
| Valor | Descripción |
|---|---|
| width | Especifica el ancho del área de visualización de destino. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="screen and (min-width:500px)" |
| height | Especifica la altura del área de visualización de destino. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="screen and (max-height:700px)" |
| device-width | Especifica el ancho de la pantalla/papel de destino. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="screen and (device-width:500px)" |
| device-height | Especifica la altura de la pantalla/papel de destino. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="screen and (device-height:500px)" |
| orientation | Especifica la orientación de la pantalla/papel de destino. Valores posibles: 'portrait' o 'landscape'. Ejemplo: media="all and (orientation: landscape)" |
| aspect-ratio | Especifica la relación ancho/alto del área de visualización de destino. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Especifica la relación device-width/device-height de la pantalla/papel de destino. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="screen and (aspect-ratio:16/9)" |
| color | Especifica los bits/color de la pantalla de destino. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="screen and (color:3)" |
| color-index | Especifica el número de colores que puede manejar la pantalla de destino. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="screen and (min-color-index:256)" |
| monochrome | Especifica los bits/píxel en el búfer de fotogramas monocromático. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="screen and (monochrome:2)" |
| resolution | Especifica la densidad de píxeles (dpi o dpcm) de la pantalla/papel de destino. Se pueden usar los prefijos 'min-' y 'max-'. Ejemplo: media="print and (resolution:300dpi)" |
| scan | Especifica el método de escaneo de la pantalla de TV. Valores posibles: 'progressive' e 'interlace'. Ejemplo: media="tv and (scan:interlace)" |
| grid | Especifica si el dispositivo de salida es de cuadrícula o de mapa de bits. Valores posibles: '1' para cuadrícula, de lo contrario '0'. Ejemplo: media="handheld and (grid:1)" |
Etiqueta HTML <link> Otras extensiones