CSS Media Query Generator

Generate media queries for Bootstrap, Tailwind, MUI, Bulma, or custom breakpoints.

Preset: Tailwind CSSApproach: Mobile-firstBreakpoints: 5Queries: 5

Presets:

Framework Preset

Responsive Approach

CSS selector template

Use {bp} for breakpoint name. Leave blank for default template.

Tailwind CSS Breakpoints

Name	Min-width
xs	All screens
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Generated CSS

Mobile-first vs desktop-first media queries

Mobile-first (min-width) writes base styles for small screens and overrides for larger ones. This is the modern default — Tailwind CSS, Bootstrap 5, and MUI all use it. Desktop-first (max-width) starts from large screens and uses max-width breakpoints to narrow down. Use max-width: (breakpoint - 0.02px) to avoid overlap between adjacent breakpoints on non-fractional screens.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Producing breakpoint queries that match a project's scale.
Getting the syntax for a range query or a preference query.
Building a set of queries in a consistent min-width or max-width style.
Producing queries for print or reduced-motion alongside width.
Checking a breakpoint's boundary behaviour before using it.

Frequently Asked Questions

Why is mobile-first the default?: Because `min-width` queries are additive: the base styles serve the smallest screen and each breakpoint only adds. With `max-width` you write the full desktop layout first and then undo pieces of it, which means more overrides and a heavier stylesheet for the device least able to afford it.
Which breakpoints do the major frameworks use?: They genuinely differ. Bootstrap 5: 576/768/992/1200/1400. Tailwind: 640/768/1024/1280/1536. MUI: 600/900/1200/1536. Bulma: 769/1024/1216/1408. Only 768 is common to most of them, which is a good hint that these are conventions rather than measurements of real devices.
Why does the max-width version subtract 0.02px?: To stop adjacent breakpoints overlapping. If one rule ends at `max-width: 768px` and the next starts at `min-width: 768px`, both apply at exactly 768. Subtracting 0.02px is Bootstrap's convention — small enough to be invisible, large enough to survive browsers that round fractional widths.
Should breakpoints be in px or em?: `em` if you want them to respond to the user's font size, which is the accessibility argument: a visitor who has set a 24px default gets a layout that breaks earlier, when the text genuinely needs more room. `px` is more predictable and is what every framework listed here actually ships.
Are container queries a replacement for these?: For components, largely yes — `@container` responds to the parent's width, so a card in a narrow sidebar can lay out differently from the same card in a wide main column without knowing anything about the viewport. Media queries remain the right tool for page-level layout and for print.

Common errors and gotchas

Mixing min-width and max-width breakpoints, which creates gaps or overlaps at the boundaries.
Using a max-width equal to the next min-width, so one pixel matches both or neither.
Writing breakpoints in pixels where the content, not the device, should decide them.
Forgetting the viewport meta tag, without which width queries behave unexpectedly on phones.
Assuming a breakpoint in rem is relative to the root font size, when it uses the initial one.