Propiedad media de <link> HTML
Definición y uso
media La propiedad especifica para qué medios/dispositivos se ha optimizado el recurso objetivo.
media La propiedad especifica en qué dispositivo se mostrará el documento enlazado.
Esta propiedad se utiliza principalmente con tablas de estilo CSS, para especificar estilos diferentes para diferentes tipos de medios.
media La propiedad puede aceptar múltiples valores.
Ejemplo
Dos estilos de hojas de estilo diferentes para dos tipos de medios diferentes (pantalla y impresión):
<head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> </head>
Sintaxis
<link media="valor>
Operadores posibles
| Operadores | Descripción |
|---|---|
| and | Define el operador AND. |
| not | Define el operador NOT. |
| , | Define el operador OR. |
Dispositivo
| Dispositivo | Descripción |
|---|---|
| all | Por defecto. Para todos los tipos de dispositivos de medios. |
| Para la vista previa de impresión y las páginas de impresión. | |
| screen | Para computadoras, tabletas, smartphones y otros. |
| speech | Lector de pantalla para la lectura de páginas. |
| aural | Descontinuado.Sintetizador de voz. |
| braille | Descontinuado.Dispositivos de retroalimentación en braille. |
| handheld | Descontinuado.Dispositivos portátiles (pantalla pequeña, ancho de banda limitado). |
| projection | Descontinuado.Proyector. |
| tty | Descontinuado.Máquinas telegráficas y otros medios similares que utilizan una cuadrícula de caracteres de espacio fijo. |
| tv | Descontinuado.Dispositivos de tipo televisión (baja resolución, capacidad de desplazamiento limitada). |
Valor
| Valor | Descripción |
|---|---|
| aspect-ratio |
Define la proporción anchura/altura de la región de visualización del objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (aspect-ratio:16/9)" |
| color |
Define el número de bits por color del monitor objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (color:3)" |
| color-index |
Define el número de colores que puede manejar el monitor objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (min-color-index:256)" |
| device-aspect-ratio | Descontinuado.Define la proporción device-width/device-height del monitor/papel objetivo. |
| device-width | Descontinuado.Define el ancho del monitor/papel objetivo. |
| device-height | Descontinuado.Define la altura del monitor/papel objetivo. |
| grid |
Define si el dispositivo de salida es una cuadrícula o un mapa de bits. Valores posibles: "1" representa la cuadrícula, "0" es otro. Ejemplo: media="handheld and (grid:1)" |
| height |
Define la altura de la región de visualización del objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (max-height:700px)" |
| monochrome |
Define cada bit por píxel en el búfer de frame monocromático. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (monochrome:2)" |
| Orientación |
Se especifica la orientación del monitor/papel objetivo. Los valores posibles son: "portrait" o "landscape". Ejemplo: media="all and (orientation: landscape)" |
| Resolución |
Se especifica la densidad de píxeles del monitor/papel objetivo (dpi o dpcm). Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="print and (resolution:300dpi)" |
| Escaneo |
Se especifica el método de escaneo del monitor de TV. Los valores posibles son: "progressive" y "interlace". Ejemplo: media="tv and (scan:interlace)" |
| Ancho |
Se especifica el ancho de la región de visualización del objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (min-width:500px)" |
Compatibilidad con navegadores
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Soporte | Soporte | Soporte | Soporte | Soporte |
