Skip to content
Related Articles

Related Articles

Improve Article

HTML | <source> media Attribute

  • Last Updated : 27 Sep, 2019

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:

ValueDescription
andAND operator
notNOT operator
,OR operator

Devices:

ValueDescription
allSuitable for all devices
auralSpeech synthesizers
brailleBraille feedback devices
handheldHandheld devices (small screen, limited bandwidth)
projectionProjectors
printPrint preview mode/printed pages
screenComputer screens
ttyTeletypes and similar media using a fixed-pitch character grid
tvLow resolution or limited scroll ability type devices like Television.

Values:



ValueDescription
widthTargeted display area’s width.
heightTargeted display area’s height
device-widthTarget display or paper’s width.
device-heightTarget display or paper’s height.
orientationTarget display or paper’s orientation.
aspect-ratioWidth/height ratio of the targeted display area.
device-aspect-ratioDevice-width/device-height ratio of the target display/paper.
colorBits per color of target display.
color-indexNumber of colors the target display can handle.
monochromeBits per pixel in a monochrome frame buffer.
resolutionPixel density (dpi or dpcm) of the target display/paper.
scanScanning method of a tv display.
gridIf 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
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up