Media Queries: CSS Guide for Responsive Web Design

Media queries are a CSS technique that applies styles based on device characteristics, such as screen width, orientation, or user preferences like reduced motion. They form the backbone of responsive web design, allowing a single HTML document to adapt its layout across phones, tablets, desktops, and printers.

For marketers and SEO practitioners, media queries determine how search engines and users experience your site on different devices. Proper implementation supports mobile-first indexing, improves accessibility compliance, and ensures conversion elements remain visible and functional regardless of viewport size.

What is Media Queries?

A media query consists of a media type, one or more media feature expressions, and optional logical operators. The CSS @media rule contains these conditions, applying the enclosed styles only when the query evaluates to true.

Media types define the broad category of device. While older specifications included types like tty, tv, and projection, these are now deprecated; only screen, print, and all remain in common use. The type is optional and defaults to all.

Media features describe specific characteristics of the user agent or environment. These include viewport dimensions (width, height), display quality (resolution, color), interaction methods (hover, pointer), and user preferences (prefers-color-scheme, prefers-reduced-motion). Features are case-insensitive and enclosed in parentheses.

Why Media Queries matters

• Mobile-first indexing compliance: Search engines crawl and index the mobile version of your site. Media queries ensure your mobile layout contains the same critical content and structured data as your desktop version.
• Accessibility compliance: Features like prefers-reduced-motion respect users with vestibular disorders. [Vestibular disorders affect 35% of adults by aged 40] (Frontend Masters). Supporting these preferences avoids legal risk under WCAG guidelines.
• Bandwidth optimization: The prefers-reduced-data feature allows you to serve lighter assets to users on metered connections, potentially improving page speed metrics, though [as of October 2025, no web browser supports this] (Frontend Masters).
• User experience consistency: Detecting input mechanisms via hover and pointer ensures buttons and links are sized appropriately for touch versus mouse interaction, reducing frustration and bounce rates.
• Conversion rate protection: Hiding or rearranging elements with media queries prevents critical calls-to-action from being buried or rendered unusable on small screens.

How Media Queries works

The browser evaluates media queries in three steps.

1. Parse the query: The browser checks the media type (if specified) and the media feature expressions. Expressions can use discrete values (e.g., orientation: landscape) or ranges.
2. Evaluate conditions: For range features like width, you can use min- or max- prefixes (e.g., min-width: 600px) or comparison operators (e.g., width >= 600px). Logical operators combine conditions: and requires all conditions to match, while a comma-separated list acts as a logical or.
3. Apply styles: If the query returns true, the browser applies the CSS rules. Important for SEO: stylesheets linked with a media query via the <link> tag still download even if the query is currently false, though with lower priority. The styles simply do not apply until the query becomes true.

You can nest media queries directly inside CSS rules. [CSS nesting has had full browser support since August 2023] (Frontend Masters), allowing for more contextual organization.

Types of Media Queries

Media queries fall into two categories: media types (largely deprecated) and media features (the modern standard).

Media Types

These categorize devices broadly. Only three remain relevant: * screen: Color computer screens. * print: Printers and print previews. * all: All devices (default if omitted).

Media Features

These detect specific capabilities and are the preferred method for modern responsive design.

Note that [as of September 2025, only Chrome and Edge support prefers-reduced-transparency] (Frontend Masters), while [only Safari supports the inverted-colors media query] (Frontend Masters).

Best practices

• Query capabilities, not devices: Avoid detecting "mobile" via orientation or deprecated device-width. Instead, check pointer and hover to determine if the primary input is touch or mouse.
• Respect motion preferences: Always wrap animations in @media (prefers-reduced-motion: no-preference). Users with vestibular disorders require reduced motion.
• Use modern range syntax: Write (width >= 600px) instead of (min-width: 600px) for better readability. You can also write ranges like (600px <= width <= 900px).
• Nest queries contextually: Place media queries inside the CSS rules they modify rather than at the bottom of the file. This improves maintainability.
• Prefer relative units: Use em or rem for breakpoints rather than pixels. Relative units scale with the user's base font size, improving accessibility.
• Support color schemes: Implement prefers-color-scheme to offer dark mode, reducing eye strain and matching OS settings.

Common mistakes

• Mistake: Assuming stylesheets with non-matching queries do not download. This wastes bandwidth. Fix: Consolidate critical CSS and defer non-critical styles; understand that the browser fetches the file regardless.
• Mistake: Using deprecated media features like device-width or device-height (which refer to the physical screen) instead of width or height (which refer to the viewport). Fix: Use viewport-relative features to match the actual browser window, especially on desktop where users resize windows.
• Mistake: Hiding content with display: none to "simplify" mobile views while keeping it for desktop. This can create mobile-first indexing issues if important content is hidden. Fix: Ensure all SEO-critical content is visible in the default (mobile) view, or use semantic HTML to ensure the content is still accessible to crawlers.
• Mistake: Ignoring prefers-reduced-motion. Autoplaying animations can trigger physical discomfort. Fix: Query @media (prefers-reduced-motion: reduce) and disable or reduce animations.
• Mistake: Relying solely on orientation to detect phones. Vertical monitors and tablets in stands violate this assumption. Fix: Combine orientation with hover and pointer checks if layout must change, but prefer fluid layouts that work in both.

Examples

Scenario: Responsive grid breakpoint Rearrange a grid layout when the viewport exceeds 600px.

.container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (width >= 600px) {
  .container {
    grid-template-columns: 1fr 3fr;
  }
}

Scenario: Respecting motion sensitivity Disable continuous animations for users who request reduced motion.

.banner {
  animation: slide 10s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .banner {
    animation: none;
    opacity: 1;
  }
}

Scenario: Touch-friendly hover states Adjust button sizes when the primary input is a coarse pointer (finger) with no hover capability.

.button {
  padding: 0.5rem;
}

@media (hover: none) and (pointer: coarse) {
  .button {
    padding: 1rem;
    font-size: 1.2rem;
  }
}

Scenario: High-resolution images Serve larger background images to high-density displays.

.hero {
  background-image: url("image-1x.jpg");
}

@media (resolution > 1x) {
  .hero {
    background-image: url("image-2x.jpg");
  }
}

FAQ

What is the difference between screen and print media types? The screen type targets color computer monitors. The print type targets printers and print preview modes. Use print to remove navigation bars, backgrounds, and buttons from printed pages, ensuring only content appears on paper.

Do media queries directly impact SEO rankings? Media queries themselves are not a ranking factor, but their implementation affects mobile usability and page experience. Google uses mobile-first indexing, so if your media queries hide critical content on small screens, your rankings may suffer. Proper use improves Core Web Vitals by optimizing layouts for specific viewports.

What does "mobile-first" mean in CSS? Mobile-first means you write base styles for the smallest viewport, then use min-width media queries to add complexity for larger screens. This approach ensures that devices with limited capabilities (or older browsers that ignore media queries) receive the simplest, most robust layout.

Why does my site still download CSS files that don't match the current device? Browsers download all linked stylesheets to ensure they are available if conditions change (e.g., resizing a window or rotating a phone). The file is downloaded at a lower priority but counts against your bandwidth budget. To avoid this, combine stylesheets where possible or use inline critical CSS.

How do I handle users who need high contrast or dark mode? Use prefers-color-scheme: dark to detect system dark mode settings and prefers-contrast: more or forced-colors: active for high contrast modes. Provide adequate color contrast and avoid background images that disappear in forced colors mode.

Can I use media queries to detect specific devices like iPhones? No. Detecting specific devices via user agent or feature sniffing is unreliable and fragile. Apple and Android devices change dimensions frequently. Instead, design for breakpoints based on content needs (where your layout breaks) and input methods (touch vs. mouse).

Related terms

Responsive Web Design CSS Viewport Breakpoints Accessibility Mobile-First Indexing User Agent Aspect Ratio