HTML | <link> media Attribute
The HTML link media attribute is used to specify what media/device the target resource is optimized for. This attribute used to specify a different style for different media type.
The media attribute can accept several values.
Syntax:
<link media="value">
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 >
< link rel="stylesheet"
type="text/css"
href="index_screen.css">
< link rel="stylesheet"
type="text/css"
href="index_print.css"
media="print">
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< p >< a href="index.html" target="_blank">
Click here
</ a >
</ center >
</ body >
</ html >
|
Output:
Supported Browsers: The browsers supported by HTML link media attribute are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 6 and above
- Firefox 1 and above
- Apple Safari 4 and above
- Opera 12.1 and above
Last Updated :
06 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...