What is a media query CSS?

A media query in CSS is a rule, written with the @media at-rule, that applies a block of styles only when the device or browser meets a condition you describe, such as a minimum viewport width, a particular orientation, or a user preference like dark mode. It lets a single stylesheet adapt the same page to phones, tablets, laptops, and printers, which is why media queries are the backbone of responsive web design.

In practice you wrap normal CSS in a query that tests the environment. The rules inside only take effect when the test passes, so the layout can shift, hide, resize, or recolor elements as the viewport changes.

/* Base styles apply everywhere */
.card {
  padding: 16px;
  font-size: 14px;
}

/* These override only when the viewport is at least 768px wide */
@media (min-width: 768px) {
  .card {
    padding: 32px;
    font-size: 16px;
  }
}

Anatomy of a Media Query

A media query is built from a few parts. Understanding each one makes it easy to read any query you encounter:

• @media: The at-rule that opens the query and tells the browser the following block is conditional.
• Media type: An optional keyword (all, screen, or print) describing the broad category of device. If omitted it defaults to all.
• Media feature: One or more tests in parentheses, such as (min-width: 768px) or (orientation: landscape), that check a measurable characteristic of the device or viewport.
• Logical operator: Keywords such as and, not, only, or a comma that combine multiple conditions.
• Rule block: The curly-brace block of CSS declarations that apply when the whole query evaluates to true.

@media screen and (min-width: 768px) and (orientation: landscape) {
  /* media type: screen
     features: min-width 768px AND landscape
     these rules apply only when all conditions are true */
  .sidebar { display: block; }
}

Media Types

Media types describe the general category of device the styles target. Modern CSS keeps three in active use:

• all: Matches every device. This is the default when no type is written.
• screen: Matches screens such as monitors, laptops, tablets, and phones. This is the type you use for responsive layouts.
• print: Matches the page when it is being printed or shown in print preview, letting you strip navigation, expand links, or adjust colors for paper.

Older types like tty, tv, and handheld have been deprecated and removed, so you should not rely on them.

Common Media Features

Media features are the conditions you actually test. The table below lists the ones you will meet most often:

/* Honor the user's dark-mode setting */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #f5f5f5;
  }
}

/* Calm animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Larger tap targets on touch devices that cannot hover */
@media (hover: none) and (pointer: coarse) {
  .btn { padding: 16px 24px; }
}

Logical Operators

Operators let you combine conditions so a query matches exactly the situations you want:

• and: Every condition must be true. @media screen and (min-width: 600px) matches a screen that is also at least 600px wide.
• Comma (or): A comma separates independent queries, and the block applies if any one matches. @media (max-width: 600px), (orientation: portrait) matches either narrow screens or portrait devices.
• not: Negates an entire query. @media not print targets everything except printing. When negating a single feature, wrap it in parentheses, as in @media not (hover).
• only: A legacy keyword that hides the query from very old browsers that never understood media queries. It has no effect in modern browsers, and the media type is required when you use it.

Mobile-First vs Desktop-First and Typical Breakpoints

There are two common ways to organize width-based queries. Mobile-first writes base styles for small screens and layers enhancements upward with min-width, which is the widely recommended approach today. Desktop-first writes base styles for large screens and scales down with max-width. The breakpoint values themselves are conventions rather than device-exact rules; popular thresholds sit around 576-600px (phones), 768px (tablets), 992-1024px (laptops), and 1200px and up (desktops).

/* Mobile-first: base styles target small screens */
.container { width: 100%; }

/* Tablet and up */
@media (min-width: 768px) {
  .container { width: 750px; }
}

/* Laptop and up */
@media (min-width: 992px) {
  .container { width: 970px; }
}

/* Desktop and up */
@media (min-width: 1200px) {
  .container { width: 1170px; }
}

Modern Range Syntax

Media Queries Level 4 introduced comparison operators that replace the min- and max- prefixes. They read more naturally and are supported across current evergreen browsers.

/* Same as (min-width: 768px) */
@media (width >= 768px) {
  .card { display: flex; }
}

/* A bounded range: 400px up to (but not over) 900px */
@media (400px <= width < 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

Where Media Queries Can Be Used

Media queries are not limited to the @media block inside a stylesheet. You can also attach a condition to a stylesheet at load time:

• @media block: The most common form, written directly inside a CSS file or a <style> tag.
• HTML link media attribute: The media attribute on a <link> tag loads a stylesheet conditionally, which can save bandwidth.
• @import rule: An @import can carry a media condition so an imported stylesheet only applies in matching environments.

<!-- Load a stylesheet only on wide screens -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="wide.css">

<!-- Load a dark-mode stylesheet only when the user prefers dark -->
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark.css">

/* Apply an imported stylesheet only in print */
@import url("print.css") print;

Media Queries vs Container Queries

A media query reacts to the viewport or device. A container query, written with the newer @container at-rule, reacts to the size of a parent container instead. The two are complementary: use media queries for page-level layout decisions, and container queries to make a reusable component adapt to whatever space it is dropped into, regardless of the overall screen size.

Because real browsers interpret breakpoints, fonts, and viewport units slightly differently, a layout that looks correct in one browser can break in another. You can verify how every media query and breakpoint renders across thousands of real browser and OS combinations using the TestMu AI Responsive Testing Tool, which shows your page side by side at multiple viewport sizes without any local setup.

Frequently Asked Questions

What is a media query in CSS?

A media query is a CSS feature, written with the @media at-rule, that applies a block of styles only when the device or viewport meets a condition you specify, such as a minimum width, a portrait orientation, or a dark color-scheme preference. It is the core mechanism behind responsive web design.

What is the basic syntax of a media query?

The syntax is @media [media-type] and (media-feature) { rules }. The media type (all, screen, or print) is optional and defaults to all. One or more feature tests in parentheses, such as (min-width: 768px), decide whether the enclosed rules apply.

What are the most common media features?

The most used features are min-width and max-width (and the plain width range), orientation, aspect-ratio, resolution, prefers-color-scheme, prefers-reduced-motion, hover, and pointer. Width-based features are by far the most common in responsive layouts.

What is the difference between mobile-first and desktop-first media queries?

Mobile-first starts with base styles for small screens and adds enhancements upward using min-width queries. Desktop-first starts with styles for large screens and scales down using max-width queries. Mobile-first is the more widely recommended approach today.

What is the modern range syntax for media queries?

Media Queries Level 4 lets you use comparison operators instead of min-/max- prefixes, for example @media (width >= 768px) or @media (400px <= width <= 900px). It is supported in current evergreen browsers and reads more clearly than the older prefix syntax.

How is a media query different from a container query?

A media query responds to the viewport or device. A container query, written with @container, responds to the size of a parent container element instead. Use media queries for page-level layout and container queries to make a component adapt to whatever space it is placed in.

• What Is the Responsiveness in CSS?
• What Is CSS Responsive Coding?
• How Do I Make My CSS Code Responsive?
• How Do You Change the Breakpoint in CSS?