Skip to content
ToolQivo

Media Query Generator

Build media queries with framework breakpoints and modern features.

Developer Tools Reviews Free · no sign-up

Quick Tool Overview

The Media Query Generator builds queries from framework breakpoints in both the modern range syntax and the traditional form, and covers the preference features that now improve a site more than another width breakpoint does.

What it does
Builds CSS media queries
You give it
Breakpoints, orientation and preferences
You get back
A query in either syntax, with devices covered
Best for
Responsive layout, dark mode and reduced motion
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the Media Query Generator

Build a media query from breakpoints, orientation and the preference features that now matter as much as width. The breakpoint sets from Tailwind, Bootstrap, Bulma and Foundation are built in, so a query matches whatever the project already uses.

Both syntaxes are generated. The range form — (width >= 768px) — is far more readable than min-width and is supported everywhere current, and the traditional form is produced alongside for anything older. Beyond width there are the queries that improve a site more than another breakpoint does: prefers-color-scheme, prefers-reduced-motion, prefers-contrast, hover and pointer — the last two being how you tell a touch device from a mouse without guessing at screen size.

Key features of the Media Query Generator

Framework breakpoints built in

Tailwind, Bootstrap, Bulma and Foundation, so a query matches what the project already uses.

Modern range syntax

(width >= 768px) alongside the traditional min-width form, since the range version reads as what it means.

Preference features

prefers-color-scheme, prefers-reduced-motion and prefers-contrast — often worth more than another breakpoint.

hover and pointer

How to tell a touch device from a mouse without guessing at screen width, which is what everyone actually wants.

Devices listed

Which common widths a query covers, as a sanity check rather than as a target to design for.

How to use the Media Query Generator

  1. 1

    Choose a breakpoint set

    Tailwind, Bootstrap, Bulma, Foundation, or your own values.

  2. 2

    Set the conditions

    Width, height, orientation, aspect ratio and the preference features.

  3. 3

    Pick a syntax

    The modern range form, or the traditional min-width and max-width.

  4. 4

    Copy the query

    With the device widths it covers listed, as a sanity check.

Frequently asked questions

Yes. Write the base styles for small screens and add complexity with min-width. It produces less CSS, it degrades better, and it matches how browsers apply overrides.

Reviews of the Media Query Generator

What people who use the Media Query Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Media Query Generator. It takes half a minute and no account.

Write the first review

More developer tools