HTML <style> media Attribute
Example
<head>
<style media="(max-width: 600px)">
body {background: tomato;}
</style>
<style media="(min-width: 600px)">
body {background: red;}
</style>
</head>
Try this code ❯
Meaning
The media attribute specifies the destination medium for the style information. The value of the attribute can be a single media descriptor, such as screen, or a comma-separated list.
Standard Syntax
<style media="mediaType">...</style>
Possible Operators
| Value |
Description |
| and |
AND operator |
| not |
NOT operator |
| , |
OR Operator |
Divices
| Value |
Description |
| all |
(Default) Suitable for all devices |
| aural |
Speech synthesizers |
| braille |
Braille feedback devices |
| handheld |
Handheld devices (like small screen, limited bandwidth etc…) |
| projection |
Projectors |
| print |
Print preview pages. |
| screen |
Screen of the devices |
| tty |
Teletypes and similar media using a fixed-pitch character grid |
| tv |
Television devices |
Attribute Values
| Value |
Description |
Example |
| width |
Specifies the width of the screen should targeted.min- and max- prefixes can be used. |
media="screen and (min-width:320px) |
| height |
Specifies the height of the screen should targeted.min- and max- prefixes can be used. |
media="screen and (max-height:640px) |
| device-width |
Specifies the width of the device screen should targeted.min- and max- prefixes can be used. |
media="screen and (device-width:600px)" |
| device-height |
Specifies the height of the device screen should targeted.min- and max- prefixes can be used. |
media="screen and (device-height:600px)" |
| orientation |
Specifies the orientation of the device value can be landscape or portrait |
media="all and (orientation: portrait)" |
| aspect-ratio |
Specifies the width/height of the screen should targeted.min- and max- prefixes can be used. |
media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
Specifies the device-width/device-height ratio of the screen should targeted.min- and max- prefixes can be used. |
media="screen and (aspect-ratio:16/9)" |
| color |
Specifies the bits per color of navigated page should be display. |
media="screen and (color:4)" |
| color-index |
Specifies the number of colors the navigated display can handle. min- and max- prefixes can be used. |
media="screen and (min-color-index:256)" |
| monochrome |
The bits per pixel in a monochrome frame buffer. min- and max- prefixes can be used. |
media="screen and (monochrome:3)" |
| resolution |
the pixel density (dpi or dpcm) of the navigated display. min- and max- prefixes can be used. |
media="print and (resolution:200dpi)" |
| scan |
Scanning method of a tv display. Values Can be "progressive" and "interlace". |
media="tv and (scan:interlace)" |
| grid |
the output device is grid or bitmap. Value can be "1" for grid, and "0" otherwise. |
media="handheld and (grid:1)" |