Should I use max-width or min-width for responsive design?

min-width is generally preferred for a mobile-first workflow: write your base styles for small screens, then layer on min-width media queries as the viewport grows. max-width suits a desktop-first approach where you're overriding styles for smaller screens instead.

What breakpoints should I actually use?

There's no universal standard, but common ranges are ~480px for phones, ~768px for tablets, ~1024px for small laptops, and ~1280px for desktops. Pick breakpoints based on where your own design actually breaks, not just these round numbers.

What's the difference between width and orientation queries?

Width queries (min-width/max-width) target the viewport's pixel size. orientation targets whether the viewport is taller than wide (portrait) or wider than tall (landscape) — useful for layouts that should adapt when a tablet is rotated, regardless of exact width.

Can I combine multiple conditions in one media query?

Yes — chain conditions with "and", like (min-width: 768px) and (orientation: landscape). This tool's "Width range" option already does this for min-width and max-width together.

Does this tool store or upload anything?

No — every value stays in your browser tab. The CSS is generated locally and nothing is sent to a server.

CSS MEDIA QUERY GENERATOR

Pick a breakpoint or custom condition, add your selector, and copy the @media rule.

Common breakpoints

Condition

Width: 768px

Selector

Declarations (semicolon-separated)

CSS

@media (max-width: 768px) {
  .container {
    display: block;
  }
}

How to build a CSS media query

1
Pick a common breakpoint (phone, tablet, laptop, desktop) or set a custom width.
2
Choose the condition type: max-width, min-width, a width range, or orientation.
3
Enter the CSS selector and the declarations that should apply inside the media query.
4
Copy the generated @media rule and paste it into your stylesheet.

Questions

Should I use max-width or min-width for responsive design?: min-width is generally preferred for a mobile-first workflow: write your base styles for small screens, then layer on min-width media queries as the viewport grows. max-width suits a desktop-first approach where you're overriding styles for smaller screens instead.
What breakpoints should I actually use?: There's no universal standard, but common ranges are ~480px for phones, ~768px for tablets, ~1024px for small laptops, and ~1280px for desktops. Pick breakpoints based on where your own design actually breaks, not just these round numbers.
What's the difference between width and orientation queries?: Width queries (min-width/max-width) target the viewport's pixel size. orientation targets whether the viewport is taller than wide (portrait) or wider than tall (landscape) — useful for layouts that should adapt when a tablet is rotated, regardless of exact width.
Can I combine multiple conditions in one media query?: Yes — chain conditions with "and", like (min-width: 768px) and (orientation: landscape). This tool's "Width range" option already does this for min-width and max-width together.
Does this tool store or upload anything?: No — every value stays in your browser tab. The CSS is generated locally and nothing is sent to a server.