HTML | <source> media Attribute
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:
<source media="media_query">
Possible Operators:
Value |
Description |
and |
AND operator |
not |
NOT operator |
, |
OR operator |
Devices:
Value |
Description |
all |
Suitable for all devices |
aural |
Speech synthesizers |
braille |
Braille feedback devices |
handheld |
Handheld devices (small screen, limited bandwidth) |
projection |
Projectors |
print |
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. |
Values:
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. |
Note: Prefixes like “min-“ and “max-“ can be used.
Example:
<!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 >
|
Output: Change the browser size.
Supported Browsers: The browsers supported by HTML source media attribute are listed below:
- Google Chrome
- Edge 12.0
- Internet Explorer 9.0
- Firefox 15.0
- Apple Safari
- Opera
Last Updated :
13 Dec, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...