CSS3 @media Query
Example
If the document width is less than 300 pixels, change the background color:
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Definition and Usage
Using the @media query, you can define different styles for different media types.
@media can set different styles for different screen sizes, especially useful if you need to design responsive pages.
When you resize the browser, the page will also be re-rendered based on the browser's width and height.
Browser Support
The numbers in the table specify the first browser version that supports the @media rule.
| Rule | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Syntax
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
not, and, and only can be used to construct complex media queries. You can also combine multiple media queries into one rule by separating them with commas.
Keywords not, only, and and:
not: Thenotoperator negates the media query. It returns true if the condition is not met, otherwise false. If used in a comma-separated query list, it only negates the specific query it is applied to. If you use thenotoperator, you must also specify the media type.only: Theonlyoperator applies styles only if the entire query matches and is useful to prevent older browsers from applying the selected styles. When not usingonly, older browsers would interpretscreen and (max-width: 500px)asscreen, ignoring the rest of the query and applying the styles to all screens. If you use theonlyoperator, you must also specify the media type.,(comma): Commas are used to combine multiple media queries into one rule. Each query in the comma-separated list is processed separately. Therefore, if any query in the list is true, the entire media statement returns true. This behavior is similar to a logical OR operator.and: Theandoperator combines multiple media query rules into a single media query. The media query is true if all query rules are true. It is also used to combine media features with media types.
Media types describe the general category of the device. Unless using not or only logical operators, the media type is optional and implicitly applies the all type.
You can also use different style sheets for different media:
<!-- Styles for screens wider than 900px -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- Styles for screens 600px or smaller -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
Media Types
| Value | Description |
|---|---|
| all | Used for all 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 handheld devices or smaller devices like PDAs and small phones |
| Used for printers and print previews | |
| projection | Deprecated. Used for projection devices |
| screen | Used for computer screens, tablets, smartphones, etc. |
| speech | Used for screen readers and other speech devices |
| tty | Deprecated. Used for fixed-pitch character grid devices like teletypes and terminals |
| tv | Deprecated. Used for television and web television |
Media Features
| Value | Description |
|---|---|
| aspect-ratio | Defines the ratio of the width to the height of the viewport |
| color | Defines the number of bits per color component of the output device. If the device is not a color device, this value is 0 |
| color-index | Defines the number of entries in the output device's color lookup table. If the device does not use a color lookup table, this value is 0 |
| device-aspect-ratio | Defines the ratio of the width to the height of the device's screen |
| device-height | Defines the visible height of the screen of the output device. |
| device-width | Defines the visible width of the screen of the output device. |
| grid | Used to query whether the output device uses a grid or bitmap. |
| height | Defines the visible area height of the page in the output device. |
| max-aspect-ratio | Defines the maximum ratio of the visible width to height of the screen of the output device. |
| max-color | Defines the maximum number of color components per color unit of the output device. |
| max-color-index | Defines the maximum number of entries in the color lookup table of the output device. |
| max-device-aspect-ratio | Defines the maximum ratio of the visible width to height of the screen of the output device. |
| max-device-height | Defines the maximum visible height of the screen of the output device. |
| max-device-width | Defines the maximum visible width of the screen of the output device. |
| max-height | Defines the maximum visible area height of the page in the output device. |
| max-monochrome | Defines the maximum number of monochrome components per pixel in a monochrome frame buffer. |
| max-resolution | Defines the maximum resolution of the device. |
| max-width | Defines the maximum visible area width of the page in the output device. |
| min-aspect-ratio | Defines the minimum ratio of the visible width to height of the page in the output device. |
| min-color | Defines the minimum number of color components per color unit of the output device. |
| min-color-index | Defines the minimum number of entries in the color lookup table of the output device. |
| min-device-aspect-ratio | Defines the minimum ratio of the visible width to height of the screen of the output device. |
| min-device-width | Defines the minimum visible width of the screen of the output device. |
| min-device-height | Defines the minimum visible height of the screen of the output device. |
| min-height | Defines the minimum visible area height of the page in the output device. |
| min-monochrome | Defines the minimum number of monochrome components per pixel in a monochrome frame buffer. |
| min-resolution | Defines the minimum resolution of the device. |
| min-width | Defines the minimum visible area width of the page in the output device. |
| monochrome | Defines the number of monochrome components per pixel in a monochrome frame buffer. If not a monochrome device, the value is 0. |
| orientation | Defines whether the visible height of the page in the output device is greater than or equal to the width. |
| resolution | Defines the resolution of the device, e.g., 96dpi, 300dpi, 118dpcm. |
| scan | Defines the scanning process of television-type devices. |
| width | Defines the visible area width of the page in the output device. |
More Examples
Example
Use @media queries to create responsive design:
@media only screen and (max-width: 500px) {
.gridmenu {
width: 100%;
}
.gridmain {
width: 100%;
}
.gridright {
width: 100%;
}
}
More Examples
CSS Media Queries for Various Device Sizes
Related Pages
CSS Tutorial: CSS Media Types