Media Query

Q: What is the difference between min-width and max-width in media queries?

min-width applies styles at that width and above, which suits mobile-first CSS. max-width applies styles at that width and below, which suits CSS written desktop-first.

Updated September 30, 20262 min read

In short

A media query is a CSS rule that applies styles only when the device or browser matches conditions such as screen width, orientation, or a dark color scheme.

What is a media query?

A media query lets a stylesheet ask questions about the environment it runs in, such as 'is the viewport at least 768 pixels wide?' or 'does the user prefer dark mode?', and apply a block of CSS only when the answer is yes. It is written with the @media at-rule followed by one or more conditions. Media queries are the core tool behind responsive design, where one page adapts to phones, tablets, and large monitors.

The most common conditions test the viewport width with min-width and max-width, and the newer range syntax, such as @media (width >= 768px), works in all current browsers. Other media features check orientation, hover and pointer to tell touchscreens from mice, prefers-color-scheme for dark mode, and prefers-reduced-motion for users who want fewer animations. Conditions can be combined with and, commas (meaning or), and not, and JavaScript can run the same checks with window.matchMedia().

Think of a media query as an if statement for CSS: if the screen is wide, show the sidebar next to the content; otherwise, stack them. A popular approach is mobile-first CSS, where base styles target small screens and min-width queries add layout at the widths, called breakpoints, where the content needs more room. On phones, media queries only behave as expected if the page includes the viewport meta tag, <meta name="viewport" content="width=device-width, initial-scale=1">.

Media queries are often confused with container queries. A media query responds to the whole viewport or device, while a container query, written with @container, responds to the size of a component's parent element, so the same card can adapt whether it sits in a narrow sidebar or a wide main column. Media queries are also only one technique of responsive design, alongside flexible layouts built with Flexbox and CSS Grid, fluid images, and relative units.

Key takeaways

A media query applies CSS only when conditions about the device or viewport are true.
Width-based queries define breakpoints for responsive layouts.
Preference queries such as prefers-color-scheme and prefers-reduced-motion respect user settings.
window.matchMedia() runs the same checks from JavaScript.
Container queries respond to a parent element's size, not the viewport.

Example

Mobile-first breakpoints and user preferencescss

/* Mobile-first: base styles are for small screens */
.layout { display: block; }

/* From 768px wide, place the sidebar next to the content */
@media (min-width: 768px) {
  .layout { display: grid; grid-template-columns: 240px 1fr; }
}

/* Respect the user's system settings */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Readers ask

What are common media query breakpoints?

There is no official list, and many teams use values near 640px, 768px, 1024px, and 1280px. It is usually better to add a breakpoint where your own content starts to look cramped than to target specific devices.

What is the difference between min-width and max-width in media queries?

min-width applies styles at that width and above, which suits mobile-first CSS. max-width applies styles at that width and below, which suits CSS written desktop-first.

Why is my media query not working on mobile?

The most common cause is a missing viewport meta tag, which makes the phone render the page at desktop width. Also check that the media query comes after the rules it should override, because a later rule with the same specificity wins.