What is a CSS media query?

A CSS media query is a conditional rule that applies styles only when the browser or device matches specific criteria such as screen width, orientation, or color scheme. They are the foundation of responsive web design.

Should I use px or em for breakpoints?

Both are valid. Pixels are absolute and predictable. Em units (relative to the browser base font size, usually 16 px) scale with user font-size preferences, which can improve accessibility. Most frameworks use px for simplicity.

What is the difference between min-width and max-width?

min-width targets viewports at or wider than the given value (mobile-first approach). max-width targets viewports at or narrower than the value (desktop-first approach). You can combine both to create a range query.

Can I combine multiple conditions?

Yes. This tool combines conditions with the "and" logical operator, which is the most common pattern. For "or" conditions you would write separate rules or use the newer comma syntax.

What are the common Tailwind CSS breakpoints?

Tailwind defaults: sm = 640 px, md = 768 px, lg = 1024 px, xl = 1280 px, 2xl = 1536 px. All are min-width (mobile-first). The presets in this tool let you select them with one click.

Does the generated code work in all browsers?

Standard @media rules with min-width, max-width, and orientation are supported in all modern browsers. The newer Level 4 range syntax (e.g. width >= 640px) has good support but may require a fallback for older browsers.

CSS Media Query Builder

Name: CSS Media Query Builder
Availability: InStock
Author: Nham Vu

Set min-width, max-width, orientation, and other conditions to instantly generate a valid CSS @media query rule.

Query Options

Quick Presets

Media Type

Min Width

Max Width

Width Unit

Orientation

Extra Feature

Generated Rule

@media screen {
  /* your styles here */
}

Breakpoint Ruler

0 480px 768px 1024px 1280px 1920px

The highlighted region shows the viewport widths matched by your query.

Condition Breakdown

No conditions active yet.

Copied!

Summary

Set min-width, max-width, orientation, and other conditions to instantly generate a valid CSS @media query rule.

How it works

Select a media type (all, screen, print) from the dropdown.
Enter optional min-width and max-width values with your preferred unit (px, em, rem).
Choose an orientation constraint (landscape or portrait) if needed.
Add extra conditions such as prefers-color-scheme or prefers-reduced-motion.
The generated @media rule updates live as you change any option.
Click Copy to paste the rule straight into your CSS file.

Use cases

Generate breakpoint rules for custom responsive layouts without memorizing syntax.
Quickly prototype media queries for mobile-first or desktop-first stylesheets.
Verify the exact syntax required for print stylesheets.
Build orientation-specific rules for tablet and phone layouts.
Use Tailwind, Bootstrap, or Material UI presets as a starting point.
Teach or learn CSS media query syntax interactively.
Create reduced-motion or dark-mode conditional rules.
Test combined conditions (range + orientation + media feature) with correct logic operators.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu