What are Media Queries in CSS?

Your site looks perfect on desktop but breaks on mobile phones. Frustrating.

Media queries solve this problem by letting CSS adapt to different screen sizes, orientations, and device capabilities. They’re the foundation of responsive design, turning one codebase into layouts that work everywhere.

This guide explains how media queries function, their syntax structure, and practical implementation strategies. You’ll learn breakpoint patterns, browser compatibility considerations, and debugging techniques that prevent common responsive design failures.

Whether building mobile-first layouts or adapting legacy sites, understanding viewport-based targeting and logical operators gives you precise control over how content renders across devices.

How Media Queries Work

Browsers evaluate media query conditions before applying associated CSS rules.

When a condition matches (like viewport width exceeding 768px), the browser applies those specific styles. Non-matching queries get ignored.

The evaluation happens during page load and when conditions change—rotating a device from portrait to landscape triggers re-evaluation.

CSS media queries integrate with the cascade, meaning later rules can override earlier ones based on specificity and source order.

Browser Parsing Process

The rendering engine reads @media rules in stylesheets and inline styles.

It checks device characteristics against query conditions using logical operators. Matching styles enter the cascade; non-matching styles are skipped entirely (not even downloaded in some cases).

Conditional Logic Structure

Media queries use AND, OR (comma), and NOT operators to create complex conditions.

Multiple feature checks combine: @media (min-width: 768px) and (max-width: 1024px) targets tablets specifically. The ONLY keyword prevents older browsers from applying styles.

Media Query Syntax Structure

A complete media query contains optional media type, optional logical keywords, and one or more media features.

Basic pattern: @media [media-type] [logical-operator] (media-feature: value) { /* CSS rules */ }

Media Types

Four recognized types exist in the specification.

screen targets computer displays, tablets, and smartphones. print applies when rendering for printers or print preview.

all matches every device (default when no type specified). speech targets screen readers and voice synthesis.

The older types (handheld, tv, projection) were deprecated due to overlapping definitions.

Media Features

Features query specific device capabilities or user preferences.

Width-based: min-width, max-width, width (exact matches are fragile). Height-based: min-height, max-height, height.

Display: aspect-ratio, orientation (portrait/landscape), resolution (pixel density). Interaction: hover (can user hover), pointer (coarse/fine pointing device).

Color: color (bits per color channel), color-gamut (display color range). User preferences: prefers-color-scheme, prefers-reduced-motion, prefers-contrast.

Logical Operators

and requires all conditions to be true: (min-width: 600px) and (orientation: landscape)

Comma (OR) matches if any condition is true: (max-width: 600px), (orientation: portrait)

not negates entire query: not screen and (color) (must include media type). only hides styles from old browsers: only screen and (min-width: 600px).

Parentheses group conditions for clarity and evaluation order.

Viewport-Based Media Queries

Viewport dimensions are the most common media query target.

Width and height queries adapt layouts to available screen space, making content readable across devices.

Width Targeting

min-width applies styles when viewport is at or above specified value—foundation of mobile-first design.

max-width applies styles up to specified value—used in desktop-first approaches.

/* Mobile-first approach */
.container { padding: 1rem; }
@media (min-width: 768px) { .container { padding: 2rem; } }

Avoid width (exact matches) because precise viewport dimensions rarely occur in real usage.

Device-Width vs Viewport-Width

device-width refers to physical screen width—mostly deprecated and inconsistent across browsers.

Modern practice uses viewport width, which reflects actual rendering area after browser chrome and zoom.

The viewport meta tag controls mobile viewport behavior: <meta name="viewport" content="width=device-width, initial-scale=1"> sets viewport to device width.

Height Considerations

Vertical space varies significantly—keyboards, browser toolbars, and notches reduce available height.

min-height and max-height adapt content for short viewports (landscape phones) or tall displays.

Height-based queries work well for full-screen sections, hero images, and modal positioning. Use sparingly since vertical scroll is expected behavior.

Pixel Density Handling

High-resolution displays (Retina, 4K) pack more pixels into physical space.

resolution media feature targets pixel density: (min-resolution: 2dppx) serves sharper images to high-DPI screens.

Use for serving 2x or 3x image assets to prevent blurry graphics. WebP and responsive images often handle this better than media queries alone.

Media Query Breakpoints

Breakpoints define where layout shifts occur to accommodate different screen sizes.

Choose values based on content needs rather than specific device dimensions—devices change constantly, content hierarchy doesn’t.

Common Breakpoint Values

Industry data shows clustering around certain ranges, though no universal standard exists.

Bootstrap 5.3 (released 2023): 576px (sm), 768px (md), 992px (lg), 1200px (xl), 1400px (xxl).

Tailwind CSS 3.x: 640px (sm), 768px (md), 1024px (lg), 1280px (xl), 1536px (2xl).

Foundation 6: 640px (medium), 1024px (large), 1200px (xlarge), 1440px (xxlarge).

Research from HTTPArchive (2024) found 768px used in 67% of responsive sites, 1024px in 54%, 320px in 43%.

Device Categories

Mobile phones: 320px–480px covers most devices in portrait; 568px–812px in landscape.

Tablets: 768px–1024px for portrait; 1024px–1366px landscape. iPad Pro reaches 1366px in landscape.

Desktops: 1280px–1920px common; 2560px+ for 4K displays and ultra-wide monitors.

Foldable devices and dual-screen hardware create new edge cases—test actual devices when possible.

Framework Breakpoints

Bootstrap’s grid system triggers column collapse at defined thresholds—col-md classes activate at 768px and above.

Foundation uses em-based breakpoints for better zoom accessibility. Tailwind offers customizable breakpoint names and values in config file.

Custom frameworks should document breakpoint logic clearly for team consistency.

Breakpoint Strategy

Start with content, not devices—find where design breaks and insert breakpoints there.

Ethan Marcotte’s 2010 A List Apart article established this principle: responsive breakpoints should serve content hierarchy, not hardware specifications.

Test between major breakpoints (what happens at 850px?). Avoid too many breakpoints—3-5 typically sufficient for most projects.

Consider container queries for component-level responsiveness independent of viewport size.

Media Features for Device Targeting

Media features query specific hardware capabilities and user preferences beyond simple dimensions.

Modern browsers support 20+ features covering display properties, interaction methods, and accessibility preferences.

Screen-Based Features

orientation detects portrait (height > width) or landscape (width > height) mode.

aspect-ratio compares width-to-height ratio: (aspect-ratio: 16/9) targets widescreen displays. resolution measures pixel density in dppx (dots per pixel) or dpi.

color returns bits per color component—zero for monochrome displays. color-gamut detects wide color support (srgb, p3, rec2020).

Print-Based Features

Print media queries optimize content for physical output.

color distinguishes color printers from black-and-white. page-orientation specifies portrait/landscape for printed pages (limited browser support).

Width/height features control page dimensions when rendering PDFs or print previews.

Interaction Features

hover detects if primary input can hover: hover: hover for mice, hover: none for touchscreens.

pointer indicates input precision: fine (mouse), coarse (touch), none (keyboard-only).

Essential for touch-optimized interfaces—hover states don’t work on phones. Design tap targets 44x44px minimum for coarse pointers per WCAG 2.5.5.

Environmental Features

User preference queries respect system-level settings for better user experience.

prefers-color-scheme detects dark or light mode preference—adopted by 76% of mobile users according to Android data (2023).

prefers-reduced-motion identifies users who disabled animations for vestibular disorders. prefers-contrast detects high/low contrast preferences.

prefers-reduced-transparency and inverted-colors have limited browser support but improve web accessibility.

Responsive Design Implementation with Media Queries

Responsive web design combines fluid layouts, flexible images, and media queries.

Research from Statista (2024) shows mobile devices generate 59.7% of global web traffic—desktop-only designs exclude majority of users.

Mobile-First Methodology

Write base styles for smallest screens, then add complexity with min-width queries.

.card { padding: 1rem; font-size: 1rem; }
@media (min-width: 768px) { .card { padding: 2rem; font-size: 1.125rem; } }

Reduces CSS overrides and matches actual usage patterns. Google’s Mobile-First Indexing (launched 2018) prioritizes mobile content for ranking.

Fluid Layouts Integration

Percentage widths and viewport units create flexible containers that scale smoothly.

Media queries trigger layout shifts at strategic breakpoints. Combine with CSS Grid or flexbox for robust grid systems.

Avoid fixed pixel widths except for specific component constraints.

Flexible Images Approach

max-width: 100%; height: auto; prevents images from overflowing containers.

Media queries serve different image resolutions: retina images for high-DPI screens, smaller files for mobile bandwidth. HTML <picture> element and srcset attribute often handle this better than CSS alone.

Art direction (different crops at different sizes) requires manual breakpoints.

Typography Scaling

Base font sizes in rem units scale relative to root element.

Responsive typography adjusts at breakpoints: 16px mobile, 18px tablet, 20px desktop. clamp() function creates fluid scaling without media queries: font-size: clamp(1rem, 2.5vw, 1.5rem).

Line height and measure (characters per line) adjust for readability—45-75 characters optimal.

Media Query Operators and Logic

Logical operators combine multiple conditions into complex queries.

Proper operator use reduces code duplication and creates precise targeting.

AND Operator

Requires all conditions to be true: @media (min-width: 768px) and (max-width: 1024px).

Chain multiple features: (min-width: 600px) and (orientation: landscape) and (hover: hover). All must match for styles to apply.

OR Operator (Comma)

Comma-separated queries apply if any condition matches.

@media (max-width: 600px), (orientation: portrait) targets small viewports OR portrait mode. Useful for grouping similar breakpoints.

NOT Operator

Negates entire query: @media not screen and (color) applies to non-color screens.

Requires media type before conditions. Less common in practice—positive conditions usually clearer.

ONLY Keyword

Hides styles from older browsers that don’t support media queries: @media only screen and (min-width: 600px).

Legacy keyword—modern browsers don’t need it. Can safely omit in new projects.

Print Media Queries

Print stylesheets optimize content for physical output and PDF generation.

Remove unnecessary elements, adjust colors, control page breaks.

Print-Specific Rules

@media print {
  nav, footer, .no-print { display: none; }
  body { color: black; background: white; }
  a[href]:after { content: " (" attr(href) ")"; }
}

Black text on white backgrounds save ink. Display URLs after links for reference.

Page Break Control

page-break-before, page-break-after, page-break-inside control pagination.

Avoid breaking inside important elements: page-break-inside: avoid; on tables and figures. CSS Fragmentation Module offers break-before/break-after/break-inside as modern replacements.

Color Adjustment

color-adjust: exact; forces background colors to print—default is economy (removes backgrounds).

Most browsers strip backgrounds and colors to save ink unless explicitly set.

Font Size Optimization

Print uses points (pt) instead of pixels traditionally—12pt body text standard.

Modern approach: keep relative units and let browser handle conversion. Test actual print output, not just print preview.

Media Queries for Accessibility

Accessible design respects user preferences and assistive technology needs.

Accessibility features reach 15-20% of users according to WHO disability statistics.

prefers-reduced-motion Feature

Detects if user disabled animations in system settings.

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

Prevents vestibular disorders, motion sickness, distraction. WCAG 2.1 Success Criterion 2.3.3 requires respecting this preference.

prefers-color-scheme Implementation

Adapts interface to dark or light mode without manual toggle.

@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #e0e0e0; }
}

Reduces eye strain in low-light environments. 82% of smartphone users enable dark mode per Android data (2023).

prefers-contrast Support

prefers-contrast: high indicates user needs stronger color differentiation.

Increase color contrast ratios beyond WCAG AA (4.5:1) to AAA (7:1) for text. prefers-contrast: low suggests reducing contrast for light sensitivity.

Browser support limited—Firefox and Safari only as of 2024.

High Contrast Mode Detection

Windows High Contrast Mode forces specific color schemes.

forced-colors: active media query detects this mode. Use system colors and avoid fixed color values that override user preferences.

Browser Compatibility for Media Queries

CSS3 media queries work in all modern browsers since 2012.

Legacy issues affect Internet Explorer and very old mobile browsers.

CSS3 Support Timeline

Chrome 4 (2010), Firefox 3.5 (2009), Safari 4 (2009), Opera 9.5 (2008) introduced full support.

Internet Explorer 9 (2011) first supported media queries—IE8 and below require polyfills. Edge supports all modern features including Level 4 additions.

Feature-Specific Support

prefers-color-scheme: Chrome 76+ (2019), Safari 12.1+ (2019), Firefox 67+ (2019).

prefers-reduced-motion: Chrome 74+ (2019), Safari 10.1+ (2017), Firefox 63+ (2018). hover and pointer: Chrome 41+ (2015), Safari 9+ (2015), Firefox 64+ (2018).

Container queries: Chrome 105+ (2022), Safari 16+ (2022), Firefox 110+ (2023)—very recent addition.

Vendor Prefix History

Media queries never required vendor prefixes (-webkit-, -moz-).

Some features like device-pixel-ratio had prefixed versions: -webkit-device-pixel-ratio (use resolution instead).

Mobile Browser Considerations

iOS Safari, Chrome Mobile, Samsung Internet support all standard features.

Opera Mini has limited support—processes CSS server-side with restrictions. UC Browser and older Android browsers may lack newer features.

Test on actual devices when possible—emulators don’t catch all quirks.

Common Media Query Patterns

Proven patterns solve recurring responsive design challenges.

These patterns appear in production sites and framework codebases.

Standard Breakpoint Pattern

/* Mobile base styles */
.container { width: 100%; padding: 1rem; }

/* Tablet */
@media (min-width: 768px) { .container { padding: 2rem; max-width: 720px; margin: 0 auto; } }

/* Desktop */
@media (min-width: 1024px) { .container { padding: 3rem; max-width: 960px; } }

Progressive enhancement from small to large screens.

Container Query Comparison

Container queries (CSS Containment Module Level 3) target element dimensions instead of viewport.

@container (min-width: 600px) { .card { grid-template-columns: 1fr 1fr; } }

Better for component-based architectures—card layouts adapt to container width regardless of page position. Requires container-type: inline-size on parent.

CSS Custom Properties Integration

Combine media queries with CSS variables for maintainable breakpoints.

:root { --breakpoint-md: 768px; }
@media (min-width: 768px) { :root { --spacing: 2rem; } }

JavaScript can read computed custom properties for consistent breakpoint logic.

Performance Optimization

Group related queries to reduce duplication: write all tablet styles in single @media block.

Avoid hundreds of media queries—browser parsing overhead increases. Critical CSS inlining benefits from extracting mobile styles separately.

Media Query Performance Considerations

Media queries impact page rendering and file size.

Optimization maintains responsiveness without sacrificing speed.

Rendering Performance

Browser evaluates all media queries on page load and viewport changes.

Excessive queries (100+) slow initial render—group related styles. Changing query conditions (resize, rotate) triggers recalculation and potential reflow.

Use matchMedia() API in JavaScript for efficient query monitoring without continuous polling.

CSS File Size Management

Media query code adds to stylesheet weight—1000+ line responsive files common.

Minification removes whitespace and comments—typically 20-30% reduction. Critical CSS approach inlines above-the-fold styles, defers rest.

Consider splitting device-specific styles into separate files loaded conditionally.

Critical CSS Extraction

Inline mobile styles in <head> for faster first paint on majority of users.

Tools like Critters or Critical extract and inline critical path CSS automatically. Load desktop media queries asynchronously: <link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">

HTTP Request Optimization

Browsers download stylesheets even if media query won’t match—<link media="print"> still fetches file.

Server-side solutions can conditionally serve CSS based on User-Agent (fragile). Modern approach: bundle all responsive CSS together with HTTP/2 multiplexing.

Conditional Resource Loading

Load high-resolution images only on high-DPI screens: <picture> element with media attributes.

Lazy-load offscreen content that appears only at certain breakpoints. Service workers can cache breakpoint-specific assets intelligently.

Media Queries vs Container Queries

Different tools for different responsive challenges.

Media queries target viewport; container queries target component dimensions.

Fundamental Differences

Media queries respond to browser viewport dimensions and device characteristics.

Container queries respond to parent container dimensions—component adapts to available space regardless of page position.

Container queries part of CSS Containment Module Level 3 (2022)—much newer technology.

Use Case Comparison

Media queries: global layout shifts, typography scaling, device-specific features.

Container queries: reusable components that appear in multiple contexts (sidebar vs main content), grid system items, card layouts.

Card in narrow sidebar displays single column; same card in wide area displays multi-column—container queries handle this naturally.

Browser Support Status

Media queries: universal support since 2012.

Container queries: Chrome 105+ (Sept 2022), Safari 16+ (Sept 2022), Firefox 110+ (March 2023). Can’t rely on container queries without fallbacks until 2025+ for most projects.

Migration Considerations

Container queries don’t replace media queries—complementary technologies.

Start with media queries for proven reliability. Add container queries progressively for component-level responsiveness.

Polyfills exist but add significant JavaScript overhead—test performance carefully.

Testing Media Queries

Thorough testing prevents breakpoint bugs and layout breaks.

Combine emulation tools with real device testing.

Browser DevTools Usage

Chrome DevTools device toolbar (Cmd+Shift+M) emulates various screen sizes and pixel densities.

Firefox Responsive Design Mode offers similar features plus touch event simulation. Safari Web Inspector provides iOS device presets.

All major browser DevTools let you toggle media queries on/off for debugging.

Device Emulation Techniques

DevTools emulation approximates devices but misses hardware-specific behaviors.

Test actual viewport calculations, not just screen dimensions. Emulate slow 3G networks to catch performance issues on mobile.

Chrome DevTools shows which media queries currently match under Rendering tab.

Real Device Testing

Emulators can’t replicate actual touch interactions, rendering quirks, or device-specific bugs.

Test on old devices—flagship phones aren’t representative of global market. BrowserStack and Sauce Labs provide cloud-based real device testing.

Local device lab with old Android phones and iOS versions catches edge cases.

Responsive Testing Tools

Responsively App (free) displays multiple viewport sizes simultaneously.

Chrome Lighthouse audits mobile performance and usability issues. Percy or Chromatic catch visual regression across breakpoints with screenshot comparisons.

Media Query Debugging

Common errors cause media queries to fail silently.

Systematic debugging identifies syntax errors and specificity conflicts.

Common Syntax Errors

Missing parentheses around features: @media min-width: 600px fails—needs (min-width: 600px).

Wrong logical operator: @media (min-width: 600px) or (max-width: 900px) invalid—use comma for OR.

Incorrect units: min-width: 600 needs unit like 600px. Typos in feature names: min-wdith, orrientation fail silently.

Specificity Conflicts

Media query styles have same specificity as non-media styles—source order determines winner.

Styles later in stylesheet override earlier ones at matching specificity. !important forces override but creates maintenance problems.

Use class specificity instead of increasing selector weight unnecessarily.

Browser Parsing Issues

Safari sometimes requires explicit and between conditions—omitting causes parsing failure.

Older browsers ignore entire @media block if any feature is unsupported. Test feature support before relying on new additions.

Validation Tools

W3C CSS Validator catches syntax errors in media queries: jigsaw.w3.org/css-validator/

Browser console shows CSS parsing warnings. ESLint with stylelint plugin catches errors during development.

DevTools breakpoint visualization shows active queries—helps identify why styles aren’t applying.

FAQ on Media Queries

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

min-width applies styles when viewport equals or exceeds specified value, used in mobile-first design.

max-width applies styles up to specified value, common in desktop-first approaches. Both create breakpoints where layouts adapt to available screen space.

Do media queries slow down website performance?

Media queries add minimal overhead—browsers evaluate them efficiently during page load and viewport changes.

Excessive queries (100+) can impact parsing speed. Group related styles within single @media blocks and minify CSS to maintain optimal performance across devices.

Can I use media queries for print stylesheets?

Yes. @media print targets printed output and PDF generation specifically.

Hide navigation and ads, adjust colors for ink economy, control page breaks, and display link URLs after anchor text. Most browsers strip backgrounds by default unless color-adjust: exact is set.

What breakpoints should I use for responsive design?

Choose breakpoints based on content needs rather than specific devices.

Common values: 768px (tablet), 1024px (desktop), though Bootstrap uses 576px, 768px, 992px, 1200px, 1400px. Test where your layout breaks and insert breakpoints there—typically 3-5 breakpoints sufficient.

How do container queries differ from media queries?

Media queries respond to viewport dimensions; container queries respond to parent element dimensions.

Container queries enable component-level responsiveness—same card adapts differently in sidebar versus main content. Supported in Chrome 105+, Safari 16+, Firefox 110+ (2022-2023).

Can media queries detect if a user prefers dark mode?

Yes. prefers-color-scheme detects system-level dark or light mode preference.

@media (prefers-color-scheme: dark) applies dark theme styles automatically. 82% of smartphone users enable dark mode according to Android data from 2023, making this feature increasingly important.

What is mobile-first design with media queries?

Write base CSS for smallest screens, then add complexity using min-width queries for larger viewports.

Matches actual usage patterns—59.7% of web traffic comes from mobile devices (Statista 2024). Reduces CSS overrides and aligns with Google’s Mobile-First Indexing for better SEO.

How do I test media queries across different devices?

Use browser DevTools device emulation (Chrome DevTools device toolbar, Firefox Responsive Design Mode) for initial testing.

Test on real devices to catch hardware-specific bugs—emulators miss touch interactions and rendering quirks. BrowserStack provides cloud-based real device access for comprehensive coverage.

Can media queries target landscape and portrait orientation?

Yes. orientation: landscape targets when width exceeds height; orientation: portrait for height exceeding width.

Useful for optimizing layouts when users rotate phones or tablets. Combine with width queries for precise control: (min-width: 768px) and (orientation: landscape).

Do all browsers support CSS media queries?

All modern browsers fully support CSS3 media queries since 2012.

Chrome 4+, Firefox 3.5+, Safari 4+, Opera 9.5+, IE9+ all compatible. Newer features like prefers-color-scheme and container queries require recent browser versions (2019+ and 2022+ respectively).

Conclusion

Media queries transform static layouts into adaptive experiences that work across smartphones, tablets, and desktops. They’re not optional anymore—with mobile traffic exceeding 59% globally, responsive design directly impacts user engagement and search rankings.

Master the fundamentals: min-width for mobile-first approaches, logical operators for precise targeting, breakpoint strategies based on content rather than devices.

Test thoroughly using browser DevTools and real hardware. Watch for syntax errors, specificity conflicts, and browser compatibility gaps.

Container queries are emerging for component-level responsiveness, but media queries remain the foundation of fluid layouts and flexible images. Start with proven viewport-based patterns, add accessibility features like prefers-reduced-motion, and optimize CSS file size for faster rendering.

Your layouts will adapt seamlessly wherever users browse.