The @media at-rule provides a way to conditionally apply blocks of CSS based on characteristics of the user’s environment. Rather than being a single property or selector, it wraps one or more standard style rules and activates them only when the environment matches the specified conditions. This makes it a primary mechanism for tailoring presentation to different devices, contexts, and user preferences without duplicating entire stylesheets.

Because rules inside a @media block behave like ordinary CSS declarations when the condition is met, authors can use it to override, augment, or restrict styles in a targeted way. It is commonly used to adapt layout, typography, and interaction affordances to varying viewport sizes and orientations, but its role is broader: it enables conditional styling for printing, high-contrast modes, reduced-motion preferences, and other environment-dependent concerns. When the environment changes (for example, when a browser window is resized or a device is rotated), the set of active rules is re-evaluated and the applicable styles are applied live.

From a code-organization and maintainability perspective, @media blocks let you co-locate context-specific rules with the rest of a component’s stylesheet or centralize all conditional rules in one place, depending on your preferred architecture. They interact with the normal cascade and specificity model: declarations inside a matched @media block compete with other declarations according to the same rules, so order and selector specificity still determine the final computed styles. Because of this, careful structuring—such as placing more specific conditional overrides after base styles—helps avoid unexpected results.

There are also performance and tooling considerations. Excessive, overly complex condition logic or very large numbers of separate conditional blocks can increase stylesheet processing overhead and make maintenance harder. Many developers balance readability and performance by grouping related conditional rules, using component-scoped styles, and relying on a small set of well-considered conditions that capture the main presentation breakpoints or user preferences. In short, @media is a flexible, runtime-aware mechanism for adapting styles to the environment while remaining fully integrated with the cascade and the rest of the CSS model.

@media <media-types> {
  /* media-specific styles */
}

• allSuitable for all devices.
• brailleIntended for braille tactile feedback devices.
• embossedIntended for paged braille printers.
• handheldIntended for handheld devices (typically small screen, limited bandwidth).
• printIntended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
• projectionIntended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
• screenIntended primarily for color computer screens.
• speechIntended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
• ttyIntended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
• tvIntended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

The following information will show you the current browser support for the CSS at-rule @media. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

This at-rule is supported by all modern browsers.

Desktop

Tablets & Mobile