What is a CSS media query?

A CSS media query is a rule that applies styles only when certain conditions are true — for example, when the viewport width is at least 768 px. They are the foundation of responsive web design, letting you adapt layouts for mobile phones, tablets, and desktop screens.

What breakpoints should I use for responsive design?

Common breakpoints are: 480 px (mobile landscape), 768 px (tablet portrait), 1024 px (laptop), 1280 px (desktop), and 1536 px (wide screen). This tool includes all of these as one-click presets, or you can set any custom values.

Should I use min-width or max-width in media queries?

A mobile-first approach uses min-width — you write base styles for small screens and add larger-screen overrides with min-width queries. A desktop-first approach uses max-width. This generator supports both, as well as combining them for range queries.

What is a CSS @supports query?

@supports (feature query) lets you apply styles only when a browser supports a specific CSS property and value. For example, @supports (display: grid) {} applies styles only in browsers that support CSS Grid. You can add @supports conditions directly in this tool.

Is this tool free and does it require login?

Yes — completely free, no account, no login, no data sent to any server. All CSS generation happens 100% in your browser.

100% Free — No Login Required

Build CSS Media Queries
Without Memorising Syntax

Select breakpoint presets or set custom ranges, add orientation or print conditions, and get clean, copy-ready CSS media query code instantly — all in your browser.

📱

Breakpoint Presets

One-click presets for common breakpoints — mobile (480 px), tablet (768 px), laptop (1024 px), desktop (1280 px), and wide (1536 px).

🎛️

Custom Ranges

Fine-tune min-width, max-width, or both. Combine with orientation (portrait / landscape), print media, and @supports feature queries.

⚡

Instant Code Output

Get clean, formatted CSS output with a live preview that updates as you change settings. Copy to clipboard in one click.

Breakpoint Presets

Min Width (px)

Max Width (px)

Conditions

Media Type

Orientation

Prefers Color Scheme

Hover Capability

Min Resolution (leave blank to skip)

@supports Feature Query (optional)

Live PreviewTablet preset · ≥ 768px · ≤ 1023px

style.css

@media screen and (min-width: 768px) and
       (max-width: 1023px) {
  /* your styles here */
}

Quick Reference

Mobile first@media (min-width: 768px)

Desktop first@media (max-width: 767px)

Range query

(min-width: 768px) and
(max-width: 1023px)

Retina screens@media (min-resolution: 2dppx)

Common Breakpoints

Mobile portrait< 480px

Mobile landscape≥ 480px

Tablet portrait≥ 768px

Laptop≥ 1024px

Desktop≥ 1280px

Wide screen≥ 1536px

Frequently Asked Questions

Everything you need to know about CSS Media Query Generator.

Build CSS Media QueriesWithout Memorising Syntax

Breakpoint Presets

Custom Ranges

Instant Code Output

Breakpoint Presets

Conditions

@supports Feature Query (optional)

Quick Reference

Common Breakpoints

Frequently Asked Questions

Build CSS Media Queries
Without Memorising Syntax