CSS Media Queries & Responsive Breakpoints (2026 Guide)

What Are Media Queries?

CSS media queries let you apply styles conditionally based on the user's device, viewport, or preferences. They're the core mechanism behind responsive web design — the technique of building interfaces that adapt to any screen size.

A media query wraps a block of CSS in a condition. If the condition is true, the styles apply. If it's false, they're ignored. The most common condition tests viewport width, but media queries can also detect color scheme preference, reduced motion preference, orientation, resolution, and more.

Media Query Syntax

A media query combines an optional media type with one or more feature conditions:

screen is the media type (optional — defaults to all). min-width: 768px is the feature condition. The styles inside only apply when the viewport is at least 768px wide.

You can combine conditions with and, or (comma), and not:

Modern CSS also supports range syntax for cleaner breakpoints:

Common Breakpoints in 2026

There's no universal set of "correct" breakpoints — they should be determined by your content, not by specific device dimensions. That said, these ranges cover the vast majority of devices in 2026:

Mobile: 0–479px (small phones), 480–767px (large phones / landscape)

Tablet: 768px–1023px (portrait tablet), 1024px–1199px (landscape tablet / small laptop)

Desktop: 1200px–1439px (standard desktop), 1440px+ (large desktop)

Modern frameworks tend to use fewer breakpoints: Tailwind CSS uses sm: 640px, md: 768px, lg: 1024px, xl: 1280px, and 2xl: 1536px. Bootstrap uses sm: 576px, md: 768px, lg: 992px, xl: 1200px, and xxl: 1400px.

The trend is toward fewer, content-driven breakpoints rather than device-specific ones. Add a breakpoint when your layout breaks — not because a new device exists.

Mobile-First Design

Mobile-first means writing your base styles for the smallest screens and using min-width queries to add complexity for larger viewports:

Mobile-first has practical advantages beyond philosophy. Mobile styles load without any media query overhead. Progressive enhancement means the simplest layout is the default, and complexity is layered on only for devices that can handle it.

Useful Media Features Beyond Width

`orientation` — detects portrait vs landscape mode. Useful for adjusting image layouts and navigation patterns on tablets.

`hover` — detects if the primary input can hover. `@media (hover: hover)` targets devices with a mouse/trackpad. Use this to add hover effects only where they work.

`pointer` — detects input precision. `@media (pointer: coarse)` targets touch screens; `@media (pointer: fine)` targets mouse/stylus. Use this to adjust tap target sizes.

`resolution` — detects screen pixel density. `@media (min-resolution: 2dppx)` targets Retina/HiDPI displays for serving higher-resolution images.

`aspect-ratio` — detects viewport proportions. Useful for optimizing layouts for ultra-wide monitors or tall phone screens.

Container Queries

Container queries are a game-changing addition to CSS that let components respond to their container's size rather than the viewport's size. This means a card component can adapt its layout based on the sidebar width it's placed in — not the browser window.

Container queries are supported in all modern browsers as of 2023. They're ideal for component libraries and design systems where components are reused in different layout contexts.

Preference Queries

Modern CSS can detect user accessibility and display preferences:

`prefers-color-scheme` — detects dark/light mode preference. Essential for implementing automatic dark mode.

`prefers-reduced-motion` — detects if the user has requested reduced motion. Wrap all animations and transitions in this query to respect accessibility settings.

`prefers-contrast` — detects if the user has requested increased contrast. Useful for enhancing border visibility and text contrast.

Media Query Best Practices

Design for content, not devices. Resize your browser and add breakpoints where the layout starts looking bad — not at iPhone or iPad dimensions.

Use `em` for breakpoint values. `em`-based breakpoints account for user font-size preferences. `@media (min-width: 48em)` equals 768px at default font size but scales appropriately if the user has increased their base font size.

Keep media queries near their components. Instead of one giant media query block at the bottom of your stylesheet, put each component's responsive rules next to its base styles.

Don't hide content from mobile users. Use media queries to rearrange and adapt content, not to remove it. If something isn't important enough for mobile, question whether it should exist at all.