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>

Intente personalmente

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.
print 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