The media attribute on a <source> tag specifies the media or device the link is optimized for.
This attribute may include multiple media or device queries combined with logical conditions (and, or, not).
A media attribute on 3 <source> elements.
Together they query the device and determine the best image to use.
<picture>
<source media="(max-width: 414px)" srcset="/img/html/vangogh-sm.jpg">
<source media="(max-width: 768px)" srcset="/img/html/vangogh.jpg">
<source media="print" srcset="/img/html/vangogh-bw.jpg">
<img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">
</picture>
The media attribute specifies the media or device type the linked page or resource is optimized for.
This attribute specifies that a page or resource is designed for certain mobile devices, print media, and others.
media accepts multiple media or device type values combined with logical conditions (and, or, not).
<source media="media-query">
| Operator | Description |
|---|---|
| and | Specifies an AND operator |
| , (comma) | Specifies an OR operator |
| not | Specifies a NOT operator |
| Device | Description |
|---|---|
| all | Suitable for all devices. This is the default. |
| aural | Speech synthesizers |
| braille | Braille feedback devices -- for the visually impaired |
| handheld | Handheld devices with small screens and limited bandwidth |
| projection | Projector devices |
| Printed pages or in print-preview mode | |
| screen | Computer screens |
| tty | Teletypes and similar devices using a fixed-pitch character grid |
| tv | Television type devices with low resolution and limited scrolling |
| Name | Value | Description |
|---|---|---|
| width | pixels |
Width of targeted display. Name can be prefixed with min- or max-. |
| height | pixels |
Height of targeted display. Name can be prefixed with min- or max-. |
| device-width | pixels |
Width of the device or paper. Name can be prefixed with min- or max-. |
| device-height | pixels |
Height of the device or paper. Name can be prefixed with min- or max-. |
| orientation | landscape, portrait |
Orientation of the device or paper. |
| aspect-ratio | width/height |
Ratio of width/height of the targeted display. Name can be prefixed with min- or max-. |
| device-aspect-ratio | width/height |
Ratio of width/height of the device or paper. Name can be prefixed with min- or max-. |
| color | integer |
Bits per color of targeted display. Name can be prefixed with min- or max-. |
| color-index | integer |
Number of colors the targeted display supports. Name can be prefixed with min- or max-. |
| monochrome | integer |
Bits per pixel in a monochrome frame buffer. Name can be prefixed with min- or max-. |
| resolution | dpi or dpcm |
Pixel density of the targeted display or paper. Name can be prefixed with min- or max-. |
| scan | progressive interlace |
Scanning method of a tv display. |
| grid | 1 = grid 0 = otherwise |
Whether output device is a grid or bitmap type. |
These are some examples of valid media value expressions:
media="all and (orientation: portrait)"media="screen and (aspect-ratio: 16/10)"media="screen , (device-height: 540px)"media="screen , (aspect-ratio: 5/4)"media="screen and not (min-color-index: 512)"media="screen and (min-width: 1200px)"media="screen and (max-height: 720px)"media="handheld and (grid: 1)"media="tv and (scan: interlace)"media="print and (resolution: 400dpi)"media="screen and (max-monochrome: 2)"media="screen and not (device-width: 360px)"media="screen , (color: 8)"Here is when media support started for each browser:
 Chrome
|
38.0 | Oct 2014 |
 Firefox
|
38.0 | May 2015 |
 IE/Edge
|
13.0 | Nov 2015 |
 Opera
|
25.0 | Oct 2014 |
 Safari
|
9.1 | Mar 2016 |
