@media

The @media CSS at-rule pode ser usada para aplicar estilos com base no resultado de uma ou mais consultas de mídia, que testam o tipo, as características específicas e o ambiente de um dispositivo.

No CSS, a regra @media deve ser posta na parte superior do seu código ou aninhada dentro de algum outro conditional group at-rule.

/* Media query */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested media query */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Besides its use in the @media rule, a media query may also be applied to an HTML <link> element to restrict an entire style sheet to certain media.

<!-- Media-dependent style sheet included in HTML -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" />

In JavaScript, @media can be accessed via the CSSMediaRule (en-US) CSS object model interface.

Syntax

The @media at-rule is composed of one or more media queries, each of which consists of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators, and are case-insensitive.

Corresponding styles are applied only if a media query computes to true, i.e., when the specified media type matches the type of device the document is being displayed on 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. Nevertheless, its contents will not apply unless and until the result of the query changes to true.

Media types

Media types describe the general category of a device. Unless you use the not or only logical operators, the media type is optional and the all type will be implied.

all

Suitable for all devices.

print

Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.

screen

Intended primarily for color computer screens.

speech

Intended for speech synthesizers.

Note: Deprecated media types: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn't be used. The aural type has been replaced by speech, which is similar.

Media features

Media feature expressions test for specific characteristics of the user agent (en-US), output device, or environment. They are entirely optional. Each media feature expression must be surrounded by parentheses.

Name Summary Notes
width (en-US) Width of the viewport
height (en-US) Height of the viewport
aspect-ratio Width-to-height aspect ratio of the viewport
orientation (en-US) Orientation of the viewport
resolution (en-US) Pixel density of the output device
scan Scanning process of the output device
grid (en-US) Does the device use a grid or bitmap screen?
update (en-US) How frequently the output device can modify the appearance of content Added in Media Queries Level 4.
overflow-block (en-US) How does the output device handle content that overflows the viewport along the block axis? Added in Media Queries Level 4.
overflow-inline (en-US) Can content that overflows the viewport along the inline axis be scrolled? Added in Media Queries Level 4.
color (en-US) Number of bits per color component of the output device, or zero if the device isn't color
color-gamut Approximate range of colors that are supported by the user agent and output device Added in Media Queries Level 4.
color-index (en-US) Number of entries in the output device's color lookup table, or zero if the device does not use such a table
display-mode The display mode of the application, as specified in the web app manifest's display member Defined in the Web App Manifest spec.
monochrome (en-US) Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome
inverted-colors (en-US) Is the user agent or underlying OS inverting colors? Deferred to Media Queries Level 5.
pointer (en-US) Is the primary input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
hover (en-US) Does the primary input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
any-pointer (en-US) Is any available input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
any-hover (en-US) Does any available input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
light-level Light level of the environment Deferred to Media Queries Level 5.
scripting (en-US) Is scripting (e.g., JavaScript) available? Deferred to Media Queries Level 5.
device-width (en-US) This is an obsolete API and is no longer guaranteed to work. Width of the rendering surface of the output device Deprecated in Media Queries Level 4.
device-height (en-US) This is an obsolete API and is no longer guaranteed to work. Height of the rendering surface of the output device Deprecated in Media Queries Level 4.
device-aspect-ratio (en-US) This is an obsolete API and is no longer guaranteed to work. Width-to-height aspect ratio of the output device Deprecated in Media Queries Level 4.
-webkit-device-pixel-ratio (en-US) Non-standard Number of physical device pixels per CSS pixel Nonstandard; WebKit/Blink-specific. If possible, use the resolution (en-US) media feature instead.
-webkit-transform-3d (en-US) Non-standard Are CSS 3D transforms supported? Nonstandard; WebKit/Blink-specific. If possible, use @supports (en-US) instead.
-webkit-transform-2d (en-US) Non-standard Are CSS 2D transforms supported? Nonstandard; WebKit-specific. If possible, use @supports (en-US) instead.
-webkit-transition (en-US) Non-standard Are CSS transitions supported? Nonstandard; WebKit-specific. If possible, use @supports (en-US) instead.
-webkit-animation (en-US) Non-standard Are CSS animations supported? Nonstandard; WebKit-specific. If possible, use @supports (en-US) instead.

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 using a comma-separated list.

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, it will only negate the specific query to which it is applied. If you use the not operator, you must specify an explicit media type.

Note: The not keyword can't be used to negate an individual 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. If you use the only operator, you must specify an explicit media type.

comma-separated lists

Each query in a comma-separated media query list is treated separately from the others. If any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like the logical operator or.

Formal syntax

Error: could not find syntax for this item

Examples

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4; }
}

For more media feature examples, please see the reference page for each specific feature. For more logical operator examples, please see Using media queries.

Specifications

Specification Status Comment
Compatibility Standard
The definition of 'CSS Media Queries' in that specification.
Padrão em tempo real Standardizes the -webkit-device-pixel-ratio and -webkit-transform-3d media features.
CSS Conditional Rules Module Level 3
The definition of '@media' in that specification.
Candidata a Recomendação Defines the basic syntax of the @media rule.
Media Queries Level 4
The definition of '@media' in that specification.
Candidata a Recomendação Adds scripting, pointer, hover, light-level, update-frequency, overflow-block, and overflow-inline media features. Deprecates all media types except for screen, print, speech, and all. Makes the syntax more flexible by adding, among other things, the or keyword.
Media Queries
The definition of '@media' in that specification.
Recomendação No change.
CSS Level 2 (Revision 1)
The definition of '@media' in that specification.
Recomendação Initial definition.

Browser compatibility

BCD tables only load in the browser

See also