HTML | <source> media Attribute (original) (raw)

Last Updated : 13 Dec, 2021

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:

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:

html `

<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>

`

Output: Change the browser size. Supported Browsers: The browsers supported by HTML source media attribute are listed below: