Home >CSS >CSS reference – properties, selectors, functions >@media

@media

@media [type] [and] (condition) { … }

The styles inside apply only when the device and the window meet the condition. The basis of a responsive website: @media (min-width: 700px) { … } adds a layout for wider screens. Conditions can be combined and nested; the browser recalculates them on every change of the window.

Values

type – screen, print, all (the default).
(width >= 600px), (400px <= width < 800px) – range syntax; Chrome since 104, Firefox since 102, Safari since 16.4. The older syntax: (min-width: 600px), (max-width: 799px).
(orientation: landscape), (aspect-ratio > 16/9) – the shape of the window.
(hover: hover), (pointer: coarse) – a mouse or touch.
(prefers-color-scheme: dark), (prefers-reduced-motion: reduce), (prefers-contrast: more), (forced-colors: active) – user settings.
(resolution >= 2x) – the pixel density of the display.
and, a comma (or), not, or inside a condition (Chrome since 104, Firefox since 64, Safari since 16.4).

Examples

Mobile first: on a narrow screen the cards are below each other, from 700 px in two columns:

.cards {
  display: grid;
  gap: 16px;
}
@media (width >= 700px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

The result: at a window width below 700 px the cards are in one column, from 700 px in two.

When printing, the menu and the footer disappear and the text is black on white:

@media print {
  nav,
  footer,
  .ad { display: none; }
  body {
    background: #fff;
    color: #000;
  }
}

Things to watch out for

On a phone the page must have <meta name="viewport" content="width=device-width, initial-scale=1"> in its head, otherwise it pretends to be about 980 px wide and the width conditions do not apply.
em and rem in a condition are calculated from the default font size of the browser (usually 16 px), not from the font-size set in the CSS.
The boundaries easily overlap: (max-width: 700px) and (min-width: 700px) both apply at a width of exactly 700 px. Range syntax (width < 700px and width >= 700px) solves that.
var() does not work in a condition. Rules in @media have no higher priority – with the same specificity the order decides, so write them after the base styles.
Deciding by the size of the surrounding component, not of the window, is done with @container.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 1, Safari 3. As of October 2026 (MDN browser-compat-data).