files/en-us/web/css/reference/at-rules/@media/index.md
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
[!NOTE] In JavaScript, the rules created using
@mediacan be accessed with the {{domxref("CSSMediaRule")}} CSS object model interface.
{{InteractiveExample("CSS Demo: @media", "tabbed-standard")}}
abbr {
color: #860304;
font-weight: bold;
transition: color 0.5s ease;
}
@media (hover: hover) {
abbr:hover {
color: #001ca8;
transition-duration: 0.5s;
}
}
@media not all and (hover: hover) {
abbr::after {
content: " (" attr(title) ")";
}
}
<p>
<abbr title="National Aeronautics and Space Administration">NASA</abbr> is a
U.S. government agency that is responsible for science and technology related
to air and space.
</p>
/* At the top level of your code */
@media screen and (width >= 900px) {
article {
padding: 1rem 3rem;
}
}
/* Nested within another conditional at-rule */
@supports (display: flex) {
@media screen and (width >= 900px) {
article {
display: flex;
}
}
}
The @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule.
For a discussion of media query syntax, please see Using media queries.
A media query's <media-query-list> includes <media-type>s, <media-feature>s, and logical operators.
A <media-type> describes the general category of a device.
Except when using the only logical operator, the media type is optional and the all type is implied.
all
print
screen
[!NOTE] CSS2.1 and Media Queries 3 defined several additional media types (
tty,tv,projection,handheld,braille,embossed, andaural, but they were deprecated in Media Queries 4 and shouldn't be used.
A <media feature> describes specific characteristics of the {{glossary("user agent")}}, output device, or environment.
Media feature expressions test for their presence, value, or range of values, and are entirely optional. Each media feature expression must be surrounded by parentheses.
resolution feature with the dppx unit instead.-webkit prefixed CSS {{cssxref("animation")}}. Use the @supports (animation) feature query instead.resolution feature with the dppx unit instead.-webkit prefixed 2D CSS {{cssxref("transform")}}. Use the @supports (transform) feature query instead.-webkit prefixed 3D CSS {{cssxref("transform")}}. Use the @supports (transform) feature query instead.-webkit prefixed CSS {{cssxref("transition")}}. Use the @supports (transition) feature query instead.The logical operators not, and, only, and or 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
true for the query to be true.
It is also used for joining media features with media types.not
: 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.
[!NOTE] In Level 3, the
notkeyword can't be used to negate an individual media feature expression, only an entire media query.
only
only, older browsers would interpret the query screen and (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)
true, the entire media statement returns true.
In other words, lists behave like a logical or operator.or
, operator. Added in Media Queries Level 4.Some media queries have corresponding user agent client hints. These are HTTP headers that request content that is pre-optimized for the particular media requirement. They include {{HTTPHeader("Sec-CH-Prefers-Color-Scheme")}} and {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}.
{{csssyntax}}
To best accommodate people who adjust a site's text size, use ems when you need a {{cssxref("<length>")}} for your media queries.
Both em and px are valid units, but em works better if the user changes the browser text size.
Also consider media queries or HTTP user agent client hints to improve the user's experience.
For example, the media query prefers-reduced-motion or the equivalent HTTP header {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}) can be used to minimize the amount of animation or motion used based on user preferences.
Because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.
Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's "Resist Fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.
@media print {
body {
font-size: 10pt;
}
}
@media screen {
body {
font-size: 13px;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
The range syntax allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples:
@media (height > 600px) {
body {
line-height: 1.4;
}
}
@media (400px <= width <= 700px) {
body {
line-height: 1.4;
}
}
For more examples, please see Using media queries.
{{Specifications}}
{{Compat}}