HTML <a> mediaAttribute

HTML a 标签参考手册 HTML <a> Tag

Examples

The following example shows a link using the media attribute:

<a href="../tags/att-a-media.html" media="print and (resolution:300dpi)">Printable media attribute page</a>

Try it Yourself »

Browser Support

All major browsers support the media attribute.

Definition and Usage

The media attribute specifies what type of media/device the target URL is optimized for.

This attribute is used to specify that the target URL is designed for special devices (such as iPhone), speech, or print media.

This attribute can accept multiple values.

It can only be used when the href attribute is present.

Differences between HTML 4.01 and HTML5

This attribute is new in HTML5.

Syntax

Possible Operators

Operator	Description
and	Specifies the AND operator.
not	Specifies the NOT operator.
,	Specifies the OR operator.

Devices

Value	Description
all	Default. Suitable for all devices.
aural	Speech synthesizers.
braille	Braille feedback devices.
handheld	Handheld devices (small screens, limited bandwidth).
projection	Projectors.
print	Print preview mode / printed pages.
screen	Computer screens.
tty	Teletypewriters and similar media using a monospaced character grid.
tv	Television-type devices (low resolution, limited paging capability).

Value

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