Loading page
About this tool
Generate a CSS media query for a breakpoint.
The Media Query Generator builds a ready-to-paste CSS `@media` rule from a min width and a max width in pixels. Enter either bound, or both, and it emits `(min-width: Npx)`, `(max-width: Npx)`, or the two joined with `and`; entering 0 for a field leaves that bound out, and leaving both at 0 produces `@media all`. It is for anyone writing responsive CSS by hand who wants the bracket and condition syntax right the first time.
Open Media Query Generator on AltFTool — it loads instantly in your browser.
Enter the minimum width in pixels (or 0 if you don't want to specify a minimum) and the maximum width in pixels (or 0 if you don't want to specify a maximum) into the Media Query Generator's input fields.
There is no generate button: the Result panel rewrites itself as you type, so the defaults 768 and 0 produce @media (min-width: 768px) { /* … */ }, setting both fields to 0 falls back to @media all { /* … */ }, and a 'Query' card shows the bare condition on its own.
Press 'Copy' to put a plain-text summary on the clipboard (the field labels and values, the Result line and the Query row) or 'Download' to save that same summary as media-query-generator.txt, then paste the @media rule into your stylesheet.
A 0 in either field drops that condition entirely, so the same form produces min-only, max-only or ranged queries.
Two conditions are combined with `and` and each keeps its own parentheses, which is where hand-written queries most often break.
Alongside the full `@media` block it returns just the condition string, ready to drop into a container query or a JavaScript matchMedia call.
There is no standard set in the CSS specification, but the widely copied Bootstrap scale is 576px, 768px, 992px, 1200px and 1400px, while Tailwind uses 640px, 768px, 1024px, 1280px and 1536px. Pick the widths where your own layout actually breaks rather than inheriting a framework's numbers.
Prefer min-width for a mobile-first stylesheet: the base rules describe the narrow layout and each min-width query layers on enhancements as the viewport grows. max-width queries suit desktop-first codebases, where the base styles target large screens and each query strips things back.
Make the max-width one pixel below the next min-width — 767 paired with 768, not 768 and 768 — because a query written as `(max-width: 768px)` still matches at exactly 768px and both rules would apply. Frameworks that support fractional widths use 767.98px for the same reason.
Yes — `min-width` and `max-width` media features are part of CSS Media Queries Level 3 and have been supported in every major browser for well over a decade. The newer range syntax such as `(width >= 768px)` is more concise but has a shorter support history, which is why this tool emits the traditional form.