HTML media Attribute
Example
<a href="a-attr-media.html?output=print" media="print and (resolution:300dpi)">Open media attribute page for print.</a>
Meaning
Specification suggests the value should be used to indicate whether a destination is appropriate for screen, print, PDA, and so on
Notes: This attribute is advisory.
Standard Syntax
<element media="value">
Applies to:
The media attribute can be used on the following element:
Advertisement
Possible Operators
| Value | Description |
|---|---|
| and | AND operator |
| not | NOT operator |
| , | OR Operator |
Divices
| Value | Description |
|---|---|
| all | (Default) Suitable for all devices |
| aural | Speech synthesizers |
| braille | Braille feedback devices |
| handheld | Handheld devices (like small screen, limited bandwidth etc…) |
| projection | Projectors |
| Print preview pages. | |
| screen | Screen of the devices |
| tty | Teletypes and similar media using a fixed-pitch character grid |
| tv | Television devices |
Advertisement
Attribute Values
| Value | Description | Example |
|---|---|---|
| width | Specifies the width of the screen should targeted.min- and max- prefixes can be used. | media="screen and (min-width:320px) |
| height | Specifies the height of the screen should targeted.min- and max- prefixes can be used. | media="screen and (max-height:640px) |
| device-width | Specifies the width of the device screen should targeted.min- and max- prefixes can be used. | media="screen and (device-width:600px)" |
| device-height | Specifies the height of the device screen should targeted.min- and max- prefixes can be used. | media="screen and (device-height:600px)" |
| orientation | Specifies the orientation of the device value can be landscape or portrait | media="all and (orientation: portrait)" |
| aspect-ratio | Specifies the width/height of the screen should targeted.min- and max- prefixes can be used. | media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Specifies the device-width/device-height ratio of the screen should targeted.min- and max- prefixes can be used. | media="screen and (aspect-ratio:16/9)" |
| color | Specifies the bits per color of navigated page should be display. | media="screen and (color:4)" |
| color-index | Specifies the number of colors the navigated display can handle. min- and max- prefixes can be used. | media="screen and (min-color-index:256)" |
| monochrome | The bits per pixel in a monochrome frame buffer. min- and max- prefixes can be used. | media="screen and (monochrome:3)" |
| resolution | the pixel density (dpi or dpcm) of the navigated display. min- and max- prefixes can be used. | media="print and (resolution:200dpi)" |
| scan | Scanning method of a tv display. Values Can be "progressive" and "interlace". | media="tv and (scan:interlace)" |
| grid | the output device is grid or bitmap. Value can be "1" for grid, and "0" otherwise. | media="handheld and (grid:1)" |
More Examples
<area> Example
<img src="img/desk.jpg" usemap="#image-map">
<map name="image-map">
<area media="screen and (min-color-index:256)" target="_blank" alt="Computer" title="Computer" href="img/computer.png" coords="365,99,905,783" shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="img/cup.png" coords="1047,672,97" shape="circle">
<area target="_blank" alt="Mobile" title="Mobile" href="img/mobile.png" coords="960,385,1040,541" shape="rect">
<area target="_blank" alt="Book" title="Book" href="img/book.png" coords="175,426,96,527,20,664,232,755,298,628,364,505" shape="poly">
</map>
<link> Example
<head>
<link rel="stylesheet" type="text/css" href="demo/demo.css">
<link rel="stylesheet" type="text/css" href="demo/print.css" media="print">
</head>
<source> Example
<picture>
<source media="(min-width:650px)" srcset="demo/computer.png">
<source media="(min-width:465px)" srcset="demo/clock.png">
<img src="demo/mobile.png" alt="computer" style="width:auto;">
</picture>
<style> Example
<style media="print">
body {background: tomato;}
h1 {color: white;}
p {font-family: monospace;}
</style>