CSS Media Queries
CSS Media Queries
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
Media queries can be used to check many things, such as:
- width and height of the viewport
- orientation of the viewport (landscape or portrait)
- resolution
Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
CSS Media Types
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for print preview mode | |
| screen | Used for computer screens, tablets, smart-phones etc. |
CSS Common Media Features
Here are some commonly used media features:
| Value | Description |
|---|---|
| orientation | Orientation of the viewport. Landscape or portrait |
| max-height | Maximum height of the viewport |
| min-height | Minimum height of the viewport |
| height | Height of the viewport (including scrollbar) |
| max-width | Maximum width of the viewport |
| min-width | Minimum width of the viewport |
| width | Width of the viewport (including scrollbar) |
Media Query Syntax
A media query consists of a media type and can contain one or more media features, which resolve to either true or false.
@media not|only mediatype and (media feature)
and (media feature) {
CSS-Code;
}
The mediatype is optional (if omitted, it will be set to all). However, if you use not or only, you must also specify a mediatype.
The result of the query is true if the specified media type matches the type of device the document is being displayed on and all media features in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Meaning of the not, only, and and keywords:
not: This keyword inverts the meaning of an entire media query.
only: This keyword prevents older browsers that do not support media queries from applying the specified styles. It has no effect on modern browsers.
and: This keyword combines a media type and one or more media features.
You can also link to different stylesheets for different media and different widths of the browser window (viewport):
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width:
480px)"
href="example1.css">
<link rel="stylesheet" media="screen and (min-width:
701px) and (max-width: 900px)" href="example2.css">
etc....
Media Queries Simple Examples
One way to use media queries is to have an alternate CSS section right inside your style sheet.
The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):
Example
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Try it Yourself »
The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):
Example
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Try it Yourself »
More Media Query Examples
For much more examples on media queries, go to the next page: CSS MQ Examples.
CSS @media Reference
For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.
