Using media queries
Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.
Media queries are used for the following:
- To conditionally apply styles with the CSS
@media
and@import
at-rules. - To target specific media for the
<style>
,<link>
,<source>
, and other HTML elements with themedia=
orsizes="
attributes. - To test and monitor media states using the
Window.matchMedia()
andEventTarget.addEventListener()
methods.
Note:
The examples on this page use CSS's @media
for illustrative purposes, but the basic syntax remains the same for all types of media queries.
Syntax
A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.
-
Media types define the broad category of device for which the media query applies:
all
,print
,screen
.The type is optional (assumed to be
all
) except when using theonly
logical operator. -
Media features describe a specific characteristic of the user agent, output device, or environment:
any-hover
any-pointer
aspect-ratio
color
color-gamut
color-index
device-aspect-ratio
Deprecateddevice-height
Deprecateddevice-width
Deprecateddisplay-mode
dynamic-range
forced-colors
grid
height
hover
inverted-colors
monochrome
orientation
overflow-block
overflow-inline
pointer
prefers-color-scheme
prefers-contrast
prefers-reduced-motion
prefers-reduced-transparency
resolution
scripting
update
video-dynamic-range
width
.
For example, the
hover
feature allows a query to check whether the device supports hovering over elements. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses. -
Logical operators can be used to compose a complex media query:
not
,and
, andonly
. You can also combine multiple media queries into a single rule by separating them with commas.
A media query computes to true
when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true.
Queries involving unknown media types are always false.
Note:
A style sheet with a media query attached to its <link>
tag will still download even if the query returns false
, the download will happen but the priority of downloading will be much lower.
Nevertheless, its contents will not apply unless and until the result of the query changes to true
.
You can read why this happens in Tomayac's blog Why Browser Download Stylesheet with Non-Matching Media Queries.
Targeting media types
Media types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screen readers. For example, this CSS targets printers:
@media print {
/* … */
}
You can also target multiple devices.
For instance, this @media
rule uses two media queries to target both screen and print devices:
@media screen, print {
/* … */
}
See media types for the list of available media types.
Because media types describe devices in very broad terms, most of the originally-defined media types were deprecated, with just screen
, print
, and all
remaining. To target more specific attributes, use media features instead.
Targeting media features
Media features describe the specific characteristics of a given user agent, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:
@media (hover: hover) {
/* … */
}
Media features are either range or discrete.
Discrete features take their value from an enumerated set of possible keyword values. For example, the discrete orientation
feature accepts either landscape
or portrait
.
@media print and (orientation: portrait) {
/* … */
}
Many range features can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's viewport width is equal to or narrower than 1250px:
@media (max-width: 1250px) {
/* … */
}
This can also be written as:
@media (width <= 1250px) {
/* … */
}
With media query range features, you can either use the inclusive min-
and max-
prefixes or the more concise range syntax operators <=
and =>
.
The following media queries are equivalent:
@media (min-width: 30em) and (max-width: 50em) {
/* … */
}
@media (30em <= width <= 50em) {
/* … */
}
The range comparisons above are inclusive. To not include the comparison value, use <
and >
.
@media (30em < width < 50em) {
/* … */
}
If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not 0 or none
.
For example, this CSS will apply to any device with a color screen:
@media (color) {
/* … */
}
If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.
For more Media feature examples, please see the reference page for each specific feature.
Creating complex media queries
Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not
, and
, and only
.
Furthermore, you can combine multiple media queries into a comma-separated list; this allows you to apply the same styles in different situations.
In the previous example, we saw the and
operator used to group a media type with a media feature.
The and
operator can also combine multiple media features into a single media query. The not
operator, meanwhile, negates a media query, basically reversing its normal meaning.
The only
operator prevents older browsers from applying the styles.
Note:
In most cases, the all
media type is used by default when no other type is specified.
However, if you use the only
operator, you must explicitly specify a media type. You can see only screen
or only print
as a whole.
Combining multiple types or features
The and
keyword combines a media feature with a media type or other media features.
This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:
@media (min-width: 30em) and (orientation: landscape) {
/* … */
}
To limit the styles to devices with a screen, you can chain the media features to the screen
media type:
@media screen and (min-width: 30em) and (orientation: landscape) {
/* … */
}
Testing for multiple queries
You can use a comma-separated list of media queries to apply styles when the user's device matches any one of various media types, features, or states.
The following rule contains two media queries. The block's styles will apply if either the user's device has a height of 680px or more or if the browser viewport is in portrait mode (the viewport height is greater than the viewport width):
@media (min-height: 680px), screen and (orientation: portrait) {
/* … */
}
In this example, if the user is printing to a PDF and the page height is 800px, the media query returns true because the first query component — which tests whether the viewport has a height of 680px
or more — is true.
Likewise, if a user is on a smartphone in portrait mode with a viewport height of 480px, the media query returns true because the second query component is true.
In a comma-separated list of media queries, the individual media queries end at the comma or, in the case of the last media query in the list, at the opening bracket ({
).
Inverting a query's meaning
The not
keyword inverts the meaning of a single media query. For example, the CSS styles in this media query will apply to everything except printed media:
@media not print {
/* … */
}
The not
negates only the media query it is applied to. The not
, without parenthesis, negates all the features within the media query in which it is contained. This means, in a comma-separated list of media queries, each not
applies to the single query it is contained within, applying to all the features within that single query. In this example, the not
applies to the first media query, which concludes at the first comma:
@media not screen and (color), print and (color) {
/* … */
}
The above query is evaluated like this:
@media (not (screen and (color))), print and (color) {
/* … */
}
Both examples are valid. Media conditions can be grouped by wrapping them in parentheses (()
). These groups can then be nested within a condition the same as a single media query.
The not
is evaluated last in a media query, meaning it applies to the entire media query, not to a single feature within a query, as if an open parenthesis was added immediately after the not
and closed at the end of the media query.
The following query:
@media not all and (monochrome) {
/* … */
}
is evaluated like this:
@media not (all and (monochrome)) {
/* … */
}
It is not evaluated like this:
@media (not all) and (monochrome) {
/* … */
}
To negate a single feature within a media query, use parenthesis. Encompassing a not
and a media feature in parentheses limits the components of the query that get negated.
In this example, we negate the hover
media feature but not the all
media type:
@media all and (not(hover)) {
/* … */
}
The not(hover)
matches if the device has no hover capability. In this case, because of the parentheses, the not
applies to hover
but not to all
.
Improving compatibility with older browsers
The only
keyword prevents older browsers that do not support media queries with media features from applying the given styles.
It has no effect on modern browsers.
@media only screen and (color) {
/* … */
}
Testing for multiple features with or
You can use or
to test for a match among more than one feature, resolving to true
if any of the features are true.
For example, the following query tests for devices that have a monochrome display or hover capability:
@media (not (color)) or (hover) {
/* … */
}