Atributo media de <area> en HTML
Definición y uso
media La propiedad especifica para qué tipo de medio o dispositivo se ha optimizado el documento enlazado.
Esta propiedad se utiliza para determinar si la URL de destino está diseñada para dispositivos especiales (como iPhone), medios de voz o impresión.
Esta propiedad puede aceptar múltiples valores.
sólo cuando existe Atributo href se utiliza.
Atención:Esta propiedad es puramente sugerente.
Ejemplo
Se especifica el medio o dispositivo para optimizar la URL de destino utilizando la propiedad media:
<map name="planetmap"> <area shape="rect" coords="0,0,114,576" alt="Sol" href="sun.html" media="screen and (min-color-index:256)" </map>
Sintaxis
<area media="valor>
Operadores posibles
| Operadores | Descripción |
|---|---|
| and | Define el operador AND. |
| not | Define el operador NOT. |
| , | Define el operador OR. |
Dispositivo
| Valor | Descripción |
|---|---|
| all | Predeterminado. Adecuado para todos los dispositivos. |
| aural | Sintetizador de voz. |
| braille | Dispositivo de retroalimentación en braille. |
| handheld | Dispositivos portátiles (pantalla pequeña, ancho de banda limitado). |
| projection | Proyector. |
| Modo de vista previa de impresión/página de impresión. | |
| screen | Pantalla de computadora. |
| tty | Máquinas telegráficas y otros medios que utilizan una cuadrícula de caracteres de ancho fijo. |
| tv | Dispositivos de tipo televisión (baja resolución, capacidad de paginación limitada). |
Valor
| Valor | Descripción |
|---|---|
| width |
Define el ancho de la área de visualización objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (min-width:500px)" |
| height |
Define la altura de la área de visualización objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (max-height:700px)" |
| device-width |
Define el ancho del monitor/papel objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (device-width:500px)" |
| device-height |
Define la altura del monitor/papel objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (device-height:500px)" |
| orientation |
Define la orientación del monitor/papel objetivo. Valores posibles: "portrait" o "landscape" Ejemplo: media="all and (orientation: landscape)" |
| aspect-ratio |
Define la proporción ancho/alto de la área de visualización objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
Define la proporción device-width/device-height del monitor/papel objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (aspect-ratio:16/9)" |
| color |
Define el número de bits de cada color en el monitor objetivo. Se pueden usar 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 prefijos "min-" y "max-". Ejemplo: media="screen and (min-color-index:256)" |
| Monocromático |
Se especifica el número de bits por píxel en el búfer de cuadros monocromáticos. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (monochrome:2)" |
| Resolución |
Se especifica la densidad de píxeles del monitor/papel objetivo (dpi o dpcm). Se pueden usar prefijos "min-" y "max-". Ejemplo: media="print and (resolution:300dpi)" |
| Escaneo |
Se especifica el método de escaneo del monitor tv. Los valores posibles son: "progressive" y "interlace". Ejemplo: media="tv and (scan:interlace)" |
| Cuadrícula |
Se especifica 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)" |
Compatibilidad con navegadores
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Soporte | Soporte | Soporte | Soporte | Soporte |
