HTML <link> with media Attribute
HTML <link> with media Attribute
The media attribute specifies on what device the linked resource will be displayed.
Example
HTML Online Editor
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-print.css" media="print">
</head>
<body>
<h1>This is a Heading.</h1>
</body>
</html>
Devices Value
| Value | Explanation |
|---|---|
| all | Suitable for all devices. |
| Suitable for print out. Hard Copy. | |
| screen | Suitable for Computer Screen. Large Screen. |
| speech | Suitable for speech synthesizers. |
Key Value
| Value | Explanation |
|---|---|
| width | Specifies the width of the viewport. |
| height | Specifies the height of the viewport. |
| aspect-ratio | Specifies the width-to-height aspect ratio of the viewport. |
| orientation | Specifies the orientation of the viewport. |
| resolution | Specifies the pixel density of the output device. |
| scan | Specifies the scanning process of the output device. |
| grid | Does the device use a grid or bitmap screen? |
| update | Specifies how frequently the output device can modify the appearance of content. |
| overflow-block | Specifies how does the output device handle content that overflows the viewport along the block axis? |
| overflow-inline | Can content that overflows the viewport along the inline axis be scrolled? |
| color | Specifies the number of bits per color component of the output device, or zero if the device is black and white. ie) No Color. |
| color-gamut | Specifies the approximate range of colors that are supported by the user agent and output device. |
| color-index | Specifies number of entries in the output device's color lookup table. Note : If the device does not use such a table then it is zero. |
| display-mode | Specifies the display mode of the application. |
| monochrome | Specifies the bits per pixel in a monochrome frame buffer. |
| inverted-colors | Is the user agent or underlying OS inverting colors? |
| pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? |
| hover | Does the primary input mechanism allow the user to hover over elements? |
| any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? |
| any-hover | Does any available input mechanism allow the user to hover over elements? |
| light-level | Light level of the environment. |
| scripting | Is scripting (e.g., JavaScript) available? |
Supported Logical Operators
| Value | Explanation |
|---|---|
| and | The and operator is used for combining multiple media features together into a single media query. |
| not | The not operator is used to negate a media query, returning true if the query would otherwise return false. |
| only | The only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. |
| , | The comma operator is used to seperate each media. Here style will be applied to the entire document, if any one of the media satisfies the condition. |
Attribute Value
| Value | Explanation |
|---|---|
| media_query | Specifies on what device the linked resource will be displayed. |
Reminder
Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in HTML.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.