Open In App

HTML | <source> media Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads