The HTML source media attribute accepts any valid media query that would normally be defined in a CSS. This attribute can accept several values.
Syntax:
Devices:
Values:
Note: Prefixes like "min-" and "max-" can be used.
Example:
html
Output: Change the browser size.
Supported Browsers: The browsers supported by HTML source media attribute are listed below:
<source media="media_query">Possible Operators:
| Value | Description |
|---|---|
| and | AND operator |
| not | NOT operator |
| , | OR operator |
| Value | Description |
|---|---|
| all | Suitable for all devices |
| aural | Speech synthesizers |
| braille | Braille feedback devices |
| handheld | Handheld devices (small screen, limited bandwidth) |
| projection | Projectors |
| Print preview mode/printed pages | |
| screen | Computer screens |
| tty | Teletypes and similar media using a fixed-pitch character grid |
| tv | Low resolution or limited scroll ability type devices like Television. |
| Value | Description |
|---|---|
| width | Targeted display area’s width. |
| height | Targeted display area’s height |
| device-width | Target display or paper’s width. |
| device-height | Target display or paper’s height. |
| orientation | Target display or paper’s orientation. |
| aspect-ratio | Width/height ratio of the targeted display area. |
| device-aspect-ratio | Device-width/device-height ratio of the target display/paper. |
| color | Bits per color of target display. |
| color-index | Number of colors the target display can handle. |
| monochrome | Bits per pixel in a monochrome frame buffer. |
| resolution | Pixel density (dpi or dpcm) of the target display/paper. |
| scan | Scanning method of a tv display. |
| grid | If the output device is grid or bitmap. |
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width: 600px)"
srcset="img1.png">
<source media="(min-width: 400px)"
srcset="img2.png">
<img src="img3.png" style="width:auto;">
</picture>
</body>
</html>
- Google Chrome
- Edge 12.0
- Internet Explorer 9.0
- Firefox 15.0
- Apple Safari
- Opera