`@media` CSS at-rule

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

See full compatibility
Learn more

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 @media can be accessed with the CSSMediaRule CSS object model interface.

Try it

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>

Syntax

css

/* 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.

Description

A media query's <media-query-list> includes <media-type>s, <media-feature>s, and logical operators.

Media types

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: Suitable for all devices.
print: Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)
screen: Intended primarily for screens.

Note: 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.

Media features

A <media feature> describes specific characteristics of the 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.

any-hover: Does any available input mechanism allow the user to hover over elements?
any-pointer: Is any available input mechanism a pointing device, and if so, how accurate is it?
aspect-ratio: Width-to-height aspect ratio of the viewport.
color: 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.
color-index: Number of entries in the output device's color lookup table, or zero if the device does not use such a table.
device-aspect-ratio: Width-to-height aspect ratio of the output device. Deprecated in Media Queries Level 4.
device-height: Height of the rendering surface of the output device. Deprecated in Media Queries Level 4.
device-posture: Detects the device's current posture, that is, whether the viewport is in a flat or folded state. Defined in the Device Posture API.
device-width