Media Query Builder

How to use it

1. Tick the conditions you need and fill in the numbers, for example min-width 768px.
2. Choose how the conditions combine: AND requires all of them, OR matches any of them, NOT negates the first one.
3. Optionally pick a breakpoint preset to fill the min-width field with a value from Bootstrap, Tailwind or Material.
4. Read the generated rule and check the live indicator that tells you whether the current browser window matches.
5. Copy the CSS and drop it into your stylesheet.

Common use cases

• Writing a new breakpoint rule - get the syntax right instead of guessing the nesting order.
• Dark mode scaffolding - combine prefers-color-scheme with a width condition for a section override.
• High density screens - target 2dppx and above when you serve sharper images.
• Teaching media query logic - switch between AND and OR to see how the comma changes the meaning.

Why it stays private

Conditions are assembled locally and the match indicator uses the browser matchMedia API. Nothing leaves the page, there is no upload and no account is required.

FAQ

Q: How does OR differ from AND in the output? A: AND joins the conditions with the and keyword inside one query, so every part must be true. OR emits a comma separated list, which the browser reads as separate queries, so any one of them may match.

Q: Why does NOT only apply to the first condition? A: CSS level 3 allows negation of a single media query, not of a group. Keeping it to one condition keeps the output valid, and you can add a second query with OR if you need more.

Q: Does the preset change anything else? A: No. A preset only writes a number into the min-width field and ticks its checkbox. Every other condition stays exactly as you left it.