CSS Media Query Generator

You need a sidebar that hides below 768px, a dark mode toggle that respects prefers-color-scheme, and a print stylesheet that strips navigation — three different @media rules with three different syntaxes. You know the conditions but keep second-guessing whether it’s min-width or max-width, whether prefers-reduced-motion takes reduce or reduced, and whether 2dppx or 192dpi is the right Retina threshold.

Why This Generator (Not Writing @media by Hand)

This tool covers all four major media query categories — responsive breakpoints, device presets, accessibility preferences, and print — with a visual form that generates the complete @media block. Click a Tailwind breakpoint, toggle prefers-color-scheme: dark, add your CSS content, and copy the output. No syntax guessing, no MDN tab-switching. Everything runs in your browser; no data is sent anywhere.

What Is a CSS Media Query?

A CSS media query is a conditional rule that applies styles only when specific conditions about the user’s device or browser environment are true. Media queries are the cornerstone of responsive web design — they let you serve different layouts for phones, tablets, and desktops, and adapt to user preferences like dark mode or reduced motion.

The @media rule wraps one or more conditions called media features:

@media (min-width: 768px) {
  .sidebar {
    display: block;
  }
}

This rule applies .sidebar { display: block } only when the viewport is at least 768px wide. When the viewport shrinks below that, the styles are ignored.

This tool generates @media rules for any combination of conditions — viewport size, device orientation, color scheme preference, reduced motion, and output resolution — with copy-to-clipboard output.

How to Use This Tool

1. Choose a quick template — click a category tab (Responsive, Device, Accessibility, Print) and then a preset card to instantly load a common pattern.
2. Apply a breakpoint preset — click sm / md / lg / xl / 2xl to set a mobile-first min-width breakpoint in one click.
3. Apply a device preset — click iPhone SE, iPad, Laptop, etc. to load device-specific width ranges.
4. Build a custom query — enter min-width, max-width, min-height, max-height values and select optional features (orientation, color-scheme, reduced-motion, resolution).
5. Choose AND or OR — combine conditions with logical AND (all must match) or OR (any must match, using comma-separated queries).
6. Add CSS content — type the CSS you want to place inside the @media block in the CSS Content area.
7. Copy the output — click Copy CSS to copy the generated @media rule to your clipboard.

Media Query Syntax Reference

Viewport Size

Orientation

User Preferences

Resolution

Combining Conditions

Multiple features in one query are joined with and — all conditions must be true:

@media (min-width: 768px) and (orientation: landscape) {
  /* applies only when wide enough AND in landscape */
}

Comma-separated queries act as OR — any one condition can be true:

@media (prefers-color-scheme: dark),
       (prefers-reduced-motion: reduce) {
  /* applies when dark mode OR reduced motion is preferred */
}

Responsive Breakpoint Patterns

Mobile-First Strategy (Recommended)

Start with mobile base styles and progressively add styles for larger screens using min-width:

/* Base: all screens (mobile styles) */
.hero { font-size: 1.5rem; }

/* Tablet and up */
@media (min-width: 768px) {
  .hero { font-size: 2rem; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .hero { font-size: 2.5rem; }
}

Desktop-First Strategy

Start with desktop styles and use max-width to override on smaller screens:

/* Base: desktop styles */
.sidebar { width: 280px; display: block; }

/* Mobile: hide sidebar */
@media (max-width: 767px) {
  .sidebar { display: none; }
}

Tailwind CSS Breakpoints

If you use Tailwind CSS, these are the default breakpoints you’ll match in custom CSS:

Accessibility Media Queries

Dark Mode (prefers-color-scheme)

Respect the user’s operating system color preference:

/* Default (light theme) */
:root {
  --bg: #ffffff;
  --text: #111827;
}

/* Dark theme when user prefers it */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #f1f5f9;
  }
}

Reduced Motion (prefers-reduced-motion)

Users with vestibular disorders or other conditions may enable this OS setting to request less animation. Always respect it:

/* Default: smooth transition */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Reduce or eliminate animation */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

Best practice: Use prefers-reduced-motion: reduce (not no-preference) to target only users who have explicitly requested reduced motion.

Resolution and Retina Display Queries

Serve higher-resolution images on HiDPI (Retina) displays:

/* Standard resolution image */
.logo {
  background-image: url("logo.png");
}

/* 2× Retina or higher */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url("logo@2x.png");
    background-size: 100% 100%;
  }
}

Resolution Units

• dppx (dots per pixel) — device-independent, preferred. 1dppx = 96dpi.
• dpi (dots per inch) — physical resolution. Standard screens: 96dpi. Retina: 192dpi+.

Use dppx for Retina/HiDPI detection; use dpi when targeting print media.

Print Queries

The @media print rule applies only when the page is being printed or saved as PDF:

@media print {
  /* Hide navigation and ads */
  nav, aside, .advertisement {
    display: none !important;
  }

  /* Ensure readable font size */
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  /* Avoid page breaks inside elements */
  .section {
    page-break-inside: avoid;
  }
}

Common Mistakes

min-width vs max-width

A common mistake: using max-width: 768px when you mean “tablet and up”. The query max-width: 768px matches viewports up to 768px, not from 768px.

• Tablet and up: (min-width: 768px) ✓
• Mobile only: (max-width: 767px) ✓ (note: 767px, not 768px, to avoid overlap)

Overlapping Ranges

Avoid identical boundary values in adjacent queries. If mobile uses max-width: 768px and tablet uses min-width: 768px, both match at exactly 768px. Use min-width: 768px and max-width: 767px for a clean split.

Using em vs px in Media Queries

Some developers prefer em units in media queries for accessibility (they scale with the user’s base font size):

• 768px = 48em (at default 16px base)
• 1024px = 64em
• 1280px = 80em

This tool generates px queries (the most common convention in modern projects).

FAQ

What is the difference between AND and OR in media queries?

AND combines multiple conditions in a single @media rule — all conditions must be true simultaneously. OR is expressed with a comma: the styles apply if any of the comma-separated conditions is true. Example:

/* AND: wide screen AND landscape */
@media (min-width: 1024px) and (orientation: landscape) { }

/* OR: dark mode OR reduced motion */
@media (prefers-color-scheme: dark), (prefers-reduced-motion: reduce) { }

Which browsers support prefers-color-scheme?

prefers-color-scheme has excellent support: Chrome 76+, Firefox 67+, Safari 12.1+, Edge 79+, and all modern mobile browsers. It is safe to use in production without a polyfill.

Which browsers support prefers-reduced-motion?

prefers-reduced-motion is supported by all modern browsers: Chrome 74+, Firefox 63+, Safari 10.1+, and Edge 79+. Use it freely — unsupported browsers simply ignore the rule.

What does min-resolution: 2dppx mean?

2dppx means “2 dots per CSS pixel” — the pixel density ratio of the screen. On a 1× standard display, 1 CSS pixel = 1 physical pixel (1dppx). On a Retina display, 1 CSS pixel = 2 physical pixels (2dppx). Use 2dppx to target Retina/HiDPI screens.

Can I combine a media type (print) with feature conditions?

Yes. @media print and (color) targets only color printers. @media print and (max-width: 600px) targets narrow print layouts. However, combining print with prefers-color-scheme has no practical effect (printers don’t have color mode preferences).

Is media query content sent to a server?

No. All query generation happens entirely in your browser using JavaScript. Nothing is sent to any server.