CSS3 @media Rule
Example
Change the background-color if the viewport is 480 pixels wide or wider:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The @media rule is used to define different style rules for different media types/devices.
In CSS2 this was called media types, while in CSS3 it is called media queries.
Media queries look at the capability of the device, and can be used to check many things, such as:
- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
- and much more
Browser Support
The numbers in the table specifies the first browser version that fully supports the @media rule.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Syntax
@media not|only mediatype and (media feature) {
CSS-Code;
}
You can also have different stylesheets for different media:
<link rel="stylesheet" media="mediatype and|not|only (media
feature)"
href="mystylesheet.css">
Media Types
| Value | Description |
|---|---|
| all | Used for all media type devices |
| aural | Deprecated. Used for speech and sound synthesizers |
| braille | Deprecated. Used for braille tactile feedback devices |
| embossed | Deprecated. Used for paged braille printers |
| handheld | Deprecated. Used for small or handheld devices |
| Used for printers | |
| projection | Deprecated. Used for projected presentations, like slides |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
| tty | Deprecated. Used for media using a fixed-pitch character grid, like teletypes and terminals |
| tv | Deprecated. Used for television-type devices |
Media Features
| Value | Description |
|---|---|
| aspect-ratio | The ratio between the width and the height of the viewport |
| color | The number of bits per color component for the output device |
| color-index | The number of colors the device can display |
| device-aspect-ratio | The ratio between the width and the height of the device |
| device-height | The height of the device, such as a computer screen |
| device-width | The width of the device, such as a computer screen |
| grid | Whether the device is a grid or bitmap |
| height | The viewport height |
| max-aspect-ratio | The maximum ratio between the width and the height of the display area |
| max-color | The maximum number of bits per color component for the output device |
| max-color-index | The maximum number of colors the device can display |
| max-device-aspect-ratio | The maximum ratio between the width and the height of the device |
| max-device-height | The maximum height of the device, such as a computer screen |
| max-device-width | The maximum width of the device, such as a computer screen |
| max-height | The maximum height of the display area, such as a browser window |
| max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
| max-resolution | The maximum resolution of the device, using dpi or dpcm |
| max-width | The maximum width of the display area, such as a browser window |
| min-aspect-ratio | The minimum ratio between the width and the height of the display area |
| min-color | The minimum number of bits per color component for the output device |
| min-color-index | The minimum number of colors the device can display |
| min-device-aspect-ratio | The minimum ratio between the width and the height of the device |
| min-device-width | The minimum width of the device, such as a computer screen |
| min-device-height | The minimum height of the device, such as a computer screen |
| min-height | The minimum height of the display area, such as a browser window |
| min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
| min-resolution | The minimum resolution of the device, using dpi or dpcm |
| min-width | The minimum width of the display area, such as a browser window |
| monochrome | The number of bits per "color" on a monochrome (greyscale) device |
| orientation | The orientation of the viewport (landscape or portrait mode) |
| overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
| overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
| resolution | The resolution of the output device, using dpi or dpcm |
| scan | The scanning process of the output device |
| update-frequency | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
| width | The viewport width |
More Examples
Example
Use the @media rule to make responsive design:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Media Queries
