A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.geeksforgeeks.org/html/html-source-media-attribute/ below:

HTML | <source> media Attribute

HTML | <source> media Attribute

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: 
<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: html 
<!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:


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4