The @media CSS at-rule allows you to specify a set of styles that are applied only to certain media types that you also specify in a @media declaration.
In other words, the @media rule specifies the target media types (separated by commas) of a set of statements or rules (delimited by curly braces). For example, the following snippet specifies a set of style rules that are to be applied to print media:
@media print {
/* styles applied to print */
body {
font-size: 10pt;
}
a[href]:after {
content: "(" attr(href) ")";
/* ... */
}
}
As shown in this example, the @media rule should be followed by the media type(s) and then by a set of style rules delimited in curly braces.
For a set of styles that you want to apply to more than one media type, you should separate the media types using commas:
@media screen {
/* set of style rules that are applied to screen media */
}
There are ten recognized media types in CSS. See the Values section below for more information about each of them.
One of the most commonly used media types is the screen type. The print media type is used to specify styles for a printable document that apply when it is to be printed.
The screen media type is used as part of media queries. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features—such as size, orientation, color, etc.
Media queries are used to provide styles for a document or elements in a document depending on the conditions of the media in question. The most common use case is using media queries with the screen media type to specify styles that allow a web page or an element in a page to adapt to the different screen sizes and orientation, as part of a responsive web design workflow.
A media query is a logical expression that is either true or false. If the result of the query is true, that is, if the user agent is running in a media type that matches the specified media type, and if the conditions of the media type also match (for example screen size), then the style rules inside the media block will be applied.
For example, the following @media declarations will specify a set of styles for the screen media type depending on the screen size:
@media screen and (max-width: 35em) {
/* styles applied when the page/app is viewed on a screen with a width less than or equal to 35em */
}
@media screen and (orientation: landscape) {
/* styles applied when the page/app is viewed on a screen in a landscape mode */
}
@media screen and (orientation: portrait) {
/* styles applied when the page/app is viewed on a screen in a portrait mode */
}
@media handheld and (min-width: 20em),
screen and (min-width: 20em) {
/* styles applied on screen and handheld devices if the width of the viewport is greater than 20em. */
}
@media screen and (device-aspect-ratio: 16/9) {
/* styles applied to screen device with square pixels has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as "16:9") */
}
There is a list of possible media queries that are used as conditions to the specified media types, including orientation, viewport width, device width, viewport height, color, aspect ratio, among others. For more information about them, check the Media Queries specification for a list of possible values and many examples.
You can declare the @media rules anywhere inside your style sheet. You can even choose to use a separate style sheet for @media declarations and then import it into the main style sheet using the @import at-rule.
Official Syntax
@media media-types [and media-query-conditions]? {
/* media-specific styles */
}
The question mark indicates that the media query conditions are optional. If multiple media types are provided, they must be comma-separated.
Logical operators
The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.
and
The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.
not
The not operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.
Note: In Level 3, the
notkeyword can’t be used to negate an individual media feature expression, only an entire media query.
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. When not using only, older browsers would interpret the query screen and (max-width: 500px) as screen, ignoring the remainder of the query, and applying its styles on all screens. If you use the only operator, you must also specify a media type.
, (comma)
Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.
Values
The following are a list of recognized media types that can be used in a @media rule declaration:
- all
- Suitable for all devices.
- Intended for paged material and for documents viewed on screen in print preview mode.
- screen
- Intended primarily for color computer screens. This is the most commonly-used media type in web design.
- speech
- Intended for speech synthesizers.
Notes
A shorthand syntax is offered for media queries that apply to all media types; the keyword all can be left out (along with the trailing ‘and’). That is, if the media type is not explicitly given it is all. For example, these two are identical:
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
Media type names are case-insensitive.
The above media types fall into different media groups. The following table indicates which type falls into which group:
| Media Types | Media Groups | |||
|---|---|---|---|---|
| continuous, paged | visual, audio, speech, tactile | grid, bitmap | interactive, static | |
| paged | visual | bitmap | static | |
| screen | continuous | visual, audio | bitmap | both |
| speech | continuous | speech | N/A | both |
Examples
The following changes the layout of a navigation bar on a small screen (when viewport width is less than 50em) so that the menu items are laid on top of each other, instead of sitting next to each other.
/* applies to all media */
nav ul li {
display: inline-block;
/* ... */
}
@media screen and (max-width: 50em) {
nav ul li {
display: block;
margin-bottom: .5em;
/*...etc... */
}
}
The following example shows how to target a screen width that is larger than 800px but only in print mode:
/* applies to all media */
article {
column-count: 2;
/* ... */
}
@media only print and (min-width: 800px) {
/* styles applied when the page width is larger than 800 pixels, only in print mode */
article {
column-count: 1;
}
}The next example applies styles when the page is between 0-399 pixels and more than 601px:
/* applies to all media */
.navbar {
display: flex;
/* ... */
}
@media not screen and (min-width: 400px) and (max-width: 600px) {
/* styles applied when the page width is between 0-399 and 601-* */
.navbar {
display: grid;
/* ... */
}
}Note that this media query evaluates as
@media (not (screen and (min-width: 400px) and (max-width: 600px)))Live Demo
The following is a simple demo showing how styles specified inside media rules are applied when the viewport is resized (resize your browser). The background color of the page changes depending on the screen size. The following rules are applied in the demo:
body {
background-color: #009966; /* a green color */
}
@media screen and (max-width: 1024px) {
body {
background-color: purple;
}
}
@media screen and (max-width: 600px) {
body {
background-color: orange;
}
}
Open the demo and resize your viewport to see the corresponding background color applied.
View this demo on the Codrops PlaygroundBrowser Support
CSS3 Media Queries
Method of applying styles based on media information. Includes things like page and device dimensions
W3C Recommendation
Supported from the following versions:
Desktop
- 26
- 3.5
- 9
- 9.5
- 6.1
Mobile / Tablet
- 7.0
- 4.4
- all
- 131
- 132
