Atributo de medios HTML <enlace>

❮ Etiqueta HTML <enlace>

Ejemplo

Dos hojas de estilo diferentes para dos tipos de medios diferentes (pantalla e impresión):

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

Definición y uso

El mediaatributo especifica para qué medio/dispositivo está optimizado el recurso de destino.

Este atributo se usa principalmente con hojas de estilo CSS para especificar diferentes estilos para diferentes tipos de medios.

El mediaatributo puede aceptar varios valores.


Compatibilidad con navegador

Attribute
media Yes Yes Yes Yes Yes

Sintaxis

<link media="value">

Posibles operadores

Value Description
and Specifies an AND operator
not Specifies a NOT operator
, Specifies an OR operator

Dispositivos

Value Description
all Default. Used for all media type devices
print Used for Print preview mode/printed pages
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
aural Deprecated. Speech synthesizers
braille Deprecated. Braille feedback devices
handheld Deprecated. Handheld devices (small screen, limited bandwidth)
projection Deprecated. Projectors
tty Deprecated. Teletypes and similar media using a fixed-pitch character grid
tv Deprecated. Television type devices (low resolution, limited scroll ability)

Valores

Value Description
aspect-ratio Specifies the width/height ratio of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-aspect-ratio:16/9)"
color Specifies the bits per color of target display.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color:3)"
color-index Specifies the number of colors the target display can handle.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-color-index:256)"
device-aspect-ratio Deprecated. Specifies the device-width/device-height ratio of the target display/paper.
device-width Deprecated. Specifies the width of the target display/paper.
device-height Deprecated. Specifies the height of the target display/paper.
grid Specifies if the output device is grid or bitmap.
Possible values are "1" for grid, and "0" otherwise.
Example: media="handheld and (grid:1)"
height Specifies the height of the  targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (max-height:700px)"
monochrome Specifies the bits per pixel in a monochrome frame buffer.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-monochrome:2)"
orientation Specifies the orientation of the target display/paper.
Possible values: "portrait" or "landscape"
Example: media="all and (orientation: landscape)"
resolution Specifies the pixel density (dpi or dpcm) of the target display/paper.
"min-" and "max-" prefixes can be used.
Example: media="print and (min-resolution:300dpi)"
scan Specifies scanning method of a tv display.
Possible values are "progressive" and "interlace".
Example: media="tv and (scan:interlace)"
width Specifies the width of the targeted display area.
"min-" and "max-" prefixes can be used.
Example: media="screen and (min-width:500px)"

❮ Etiqueta HTML <enlace>