Media Query Generator

Why You Are Here

Most media query tools give you an empty @media block and leave you to fill in the styles yourself. That saves you typing about fifteen characters. This tool works the other way around: you paste the CSS you have already written, choose the breakpoint you want it to apply at, and get the complete wrapped rule back with proper indentation.

That difference matters because writing media queries is rarely about remembering the syntax. It is about three other things that slow developers down.

The first is breakpoint values. You are working in a Bootstrap project and cannot remember whether the large breakpoint is 992px or 1024px. You are on a Tailwind project next week and the numbers are completely different. Every framework picked its own scale, and switching between projects means constantly looking up values you half-remember. Selecting a framework preset removes that lookup entirely.

The second is the mobile-first versus desktop-first decision, and getting the direction right once you have chosen. Mixing min-width and max-width inconsistently across a stylesheet produces overlapping rules that fight each other, and the resulting bugs only appear at specific viewport widths that are easy to miss during testing.

The third is the queries nobody memorises. Retina display targeting, print stylesheets, orientation, and the accessibility preference queries all have syntax that most developers look up every single time because they write them a few times a year at most.

What This Tool Does

Mobile-First vs Desktop-First

This is the single most important decision when writing media queries, and it determines which direction every one of your breakpoints points.

Mobile-first uses min-width

Your base CSS, written outside any media query, applies to the smallest screens. Each breakpoint then adds or overrides styles for that width and everything above it. Styles cascade upward.

/* base: applies to all screens */
.card { padding: 16px; }

/* 768px and wider */
@media (min-width: 768px) {
  .card { padding: 32px; }
}

Desktop-first uses max-width

Your base CSS targets desktop, and each breakpoint overrides styles for that width and everything below it. Styles cascade downward.

/* base: applies to all screens */
.card { padding: 32px; }

/* 767px and narrower */
@media (max-width: 767px) {
  .card { padding: 16px; }
}

Framework Breakpoint Reference

The four frameworks the tool supports use four different breakpoint scales. This is the table developers look up constantly.

Common Device Width Reference

Useful when you need to target a real device band rather than a framework step.

Special Query Reference

The queries that are hard to remember because you write them rarely.

How to Use This Tool

1. Paste Your CSS

   Copy the CSS rules you want to apply conditionally into the left input panel. This can be a single rule or a full block of styles.

2. Choose Your Breakpoint Approach

   Select mobile-first for a min-width query, desktop-first for max-width, a specific range to target one device band, or a special query for orientation, retina, or print. Use a framework preset if your project runs on Bootstrap, Tailwind, Material Design, or Foundation.

3. Review the Generated Query

   The right panel shows the complete media query with your CSS nested and indented correctly.

4. Copy Into Your Stylesheet

   Copy the output and paste it into your CSS file, ideally near the rules it modifies rather than in a separate breakpoints section at the bottom.

Use Cases Reference Table

Common Mistakes to Avoid

Quick Reference