Media Query Generator for CSS Breakpoints

Get a full set of @media rules for Tailwind or Bootstrap breakpoints, or for a width you choose, written mobile-first, desktop-first or as a range between two widths.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

CSS

/* sm and up */
@media (min-width: 640px) {
  .element {
    /* styles */
  }
}

/* md and up */
@media (min-width: 768px) {
  .element {
    /* styles */
  }
}

/* lg and up */
@media (min-width: 1024px) {
  .element {
    /* styles */
  }
}

/* xl and up */
@media (min-width: 1280px) {
  .element {
    /* styles */
  }
}

/* 2xl and up */
@media (min-width: 1536px) {
  .element {
    /* styles */
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .element {
    /* dark styles */
  }
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print */
@media print {
  .no-print {
    display: none;
  }
}

Breakpoints in this set

Name	Width	Applies from
sm	640px	640px or wider
md	768px	768px or wider
lg	1024px	1024px or wider
xl	1280px	1280px or wider
2xl	1536px	1536px or wider

Quick answers

What are the standard CSS breakpoints?: There is no official standard, but two sets are used most. Tailwind uses 640, 768, 1024, 1280 and 1536 pixels. Bootstrap uses 576, 768, 992, 1200 and 1400 pixels. Both share 768, the usual point where phone layouts give way to tablet layouts.
What is the media query for mobile only?: With a 768px breakpoint, use @media (max-width: 767.98px). It applies to every viewport narrower than 768 pixels. In a mobile-first stylesheet you often do not need it: write the phone styles with no query and override them inside @media (min-width: 768px).
How do I write a media query between two widths?: Join a min-width and a max-width with and. For tablets between 768 and 1024 pixels the tool gives @media (min-width: 768px) and (max-width: 1023.98px). The upper limit stops just short of 1024 so it does not overlap a rule that starts there.
Should I use min-width or max-width?: Use min-width for new work. Base styles cover the smallest screen and each query adds to them as space grows, so overlapping ranges are harmless. max-width suits retrofitting a layout that was designed for desktop and needs fixes for smaller screens.
What is the media query for dark mode?: @media (prefers-color-scheme: dark) { ... }. It matches when the visitor's operating system or browser is set to a dark theme. The tool adds this block when the preference and print option is ticked.
What is 768px in em for a media query?: 48em. Media query em units are always based on the browser's default font size, normally 16 pixels, so divide the pixel width by 16. 640px is 40em, 1024px is 64em and 1280px is 80em.

How Media Query Generator works

Pick an approach and a breakpoint set and this tool writes the @media blocks for you, ready to paste and fill in. Mobile first gives min-width queries, such as @media (min-width: 768px). Desktop first gives max-width queries that end 0.02px below each breakpoint, such as @media (max-width: 767.98px), so neighbouring rules never both apply or both miss. Range gives one query between two widths. The built-in sets are Tailwind (640, 768, 1024, 1280, 1536) and Bootstrap (576, 768, 992, 1200, 1400), and Custom takes your own number. You can add an orientation condition, switch the output to em, and include ready blocks for dark mode, reduced motion and print.

Tailwind breakpoints as CSS media queries

The widths in the Tailwind set, with the query the tool writes for each approach and the same width in em.

Name	Width	Mobile first (min-width)	Desktop first (max-width)	Width in em
sm	640px	@media (min-width: 640px)	@media (max-width: 639.98px)	40em
md	768px	@media (min-width: 768px)	@media (max-width: 767.98px)	48em
lg	1024px	@media (min-width: 1024px)	@media (max-width: 1023.98px)	64em
xl	1280px	@media (min-width: 1280px)	@media (max-width: 1279.98px)	80em
2xl	1536px	@media (min-width: 1536px)	@media (max-width: 1535.98px)	96em

Tailwind v4 defines its default breakpoints in rem (40rem to 96rem), which equal the pixel widths above at a 16px default font size. Tailwind v3 listed the same widths in pixels.

Bootstrap breakpoints as CSS media queries

The widths in the Bootstrap set. The max-width values match the ones Bootstrap's own stylesheet uses.

Name	Width	Mobile first (min-width)	Desktop first (max-width)	Width in em
sm	576px	@media (min-width: 576px)	@media (max-width: 575.98px)	36em
md	768px	@media (min-width: 768px)	@media (max-width: 767.98px)	48em
lg	992px	@media (min-width: 992px)	@media (max-width: 991.98px)	62em
xl	1200px	@media (min-width: 1200px)	@media (max-width: 1199.98px)	75em
xxl	1400px	@media (min-width: 1400px)	@media (max-width: 1399.98px)	87.5em

Bootstrap also names an extra small tier for everything under 576px. It has no query of its own because it is the default, unqueried style.

Media query examples for common jobs

Inputs and the query line the tool returns. Each comes wrapped around an .element block for you to fill in.

Tablet only, between md and lg

Approach Range, Minimum width 768, Maximum width 1024, Unit px

@media (min-width: 768px) and (max-width: 1023.98px)

Tablets held sideways

Approach Range, Minimum width 768, Maximum width 1024, Orientation Landscape

@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: landscape)

Small phones in portrait

Approach Desktop first, Breakpoint set Custom, Maximum width 480, Orientation Portrait

@media (max-width: 479.98px) and (orientation: portrait)

One custom mobile-first breakpoint

Approach Mobile first, Breakpoint set Custom, Minimum width 600

@media (min-width: 600px)

A range in em

Approach Range, Minimum width 600, Maximum width 900, Unit em

@media (min-width: 37.5em) and (max-width: 56.2488em)

600 / 16 = 37.5 and (900 - 0.02) / 16 = 56.2488.

Phones up to the md breakpoint

Approach Range, Minimum width 320, Maximum width 768

@media (min-width: 320px) and (max-width: 767.98px)

Why max-width values end in .98

Viewport widths are not always whole pixels. Browser zoom and high-density screens can produce a width such as 767.5px. If one rule covers max-width: 767px and the next starts at min-width: 768px, a 767.5px viewport matches neither, and the element drops back to its base style. The bug is hard to reproduce because it only shows at certain zoom levels or on certain devices.

Writing both as 768 has the opposite problem: at exactly 768px both rules apply at once. Ending the lower range at 767.98px closes the gap without touching 768. Bootstrap uses the same 0.02px subtraction in its own max-width queries.

Mobile-first min-width queries avoid the issue altogether. Their ranges overlap on purpose, and the later rule simply wins, so no viewport can fall between two rules.

Current browsers also accept range syntax, where the same tablet query is written @media (768px <= width < 1024px). The less-than sign excludes 1024 exactly, so no .98 is needed. The tool outputs the older min-width and max-width form, which every browser in use understands.

The dark mode, reduced motion and print queries it adds

Ticking Include preference and print queries appends these three blocks after the width queries.

Query	Matches when	What the generated block does
@media (prefers-color-scheme: dark)	The visitor's system or browser is set to a dark theme	Empty .element block for your dark colours
@media (prefers-reduced-motion: reduce)	The visitor has asked their system to reduce animation	Sets animation-duration and transition-duration to 0.01ms on every element
@media print	The page is printed or saved as a PDF	Hides anything with the class no-print

The Orientation setting is added to width queries only. These three blocks are always written the same way.

Limits worth knowing before you paste

Custom produces one breakpoint per run. For a custom set of several widths, generate each one and combine them, in ascending order for min-width or descending order for max-width.
Range always reads the two width fields, whichever Breakpoint set is selected. The maximum must be larger than the minimum or the tool reports an error. The breakpoint table under the code still lists the selected set, not your range.
The em option divides by 16. Media queries ignore any font-size you set on html, so 16 is right unless the visitor has changed their browser's default text size, in which case em breakpoints scale with it by design.
Desktop-first em values carry four decimal places, for example 47.9988em, because 0.02px is subtracted before the division.
Every block targets a placeholder .element selector. Replace it with your own selectors and rules.
It writes viewport media queries only. Container queries, prefers-contrast, hover and resolution queries are not generated.

Using Media Query Generator

1
Choose an Approach: Mobile first for min-width, Desktop first for max-width, or Range for a query between two widths.
2
Choose a Breakpoint set: Tailwind, Bootstrap or Custom.
3
For Custom or Range, type the Minimum width and Maximum width in pixels. Mobile first uses the minimum, Desktop first uses the maximum, and Range uses both.
4
Set Orientation to Portrait or Landscape if the rule should only apply one way round, and pick px or em as the Unit.
5
Leave Include preference and print queries ticked to add dark mode, reduced motion and print blocks, then copy or download the CSS.

Answers to common questions

In what order should media queries go in a stylesheet?

For min-width queries, smallest first, so wider breakpoints come later and override narrower ones. For max-width queries, largest first, so narrower breakpoints come later. The tool lists both kinds from smallest to largest, so reverse the order of desktop-first blocks before using them together.

Should breakpoints be in px or em?

Both work. Pixel breakpoints are predictable and by far the most common. Em breakpoints grow when a visitor raises their browser's default text size, so someone reading at 20px text gets the narrower layout sooner, which usually suits larger text better.

Do I need the word screen in a media query?

Rarely. @media screen and (min-width: 768px) excludes print, while @media (min-width: 768px) applies to every media type. The tool leaves the type out and gives you a separate print block for print-specific rules.

What breakpoint should I use for tablets?

768 pixels is the common lower edge, matching a tablet held upright, with 1024 (Tailwind) or 992 (Bootstrap) as the upper edge. Treat these as starting points and move a breakpoint to wherever your own layout begins to look cramped or stretched.

Does orientation: landscape detect a phone turned sideways?

It matches any viewport that is wider than it is tall, which includes almost every desktop browser window. To target rotated phones, combine it with a width limit, which is what the tool does when you set both a width and an Orientation.

Why are my media queries not working on a phone?

The most common cause is a missing viewport tag. Without meta name="viewport" content="width=device-width, initial-scale=1" in the page head, phones report a width of around 980 pixels and narrow-screen queries never match. Also check that a later rule is not overriding the one inside the query.

Do I still need media queries with flexbox and grid?

Fewer of them. Flex wrapping and grid tracks such as repeat(auto-fit, minmax(240px, 1fr)) reflow on their own. Media queries are still needed for changes those cannot express, such as swapping a navigation bar for a menu button or hiding a sidebar.

Is the reduced motion block safe to use as it is?

Mostly. It is a widely used reset: shortening durations to 0.01ms, instead of removing animations, means end states still apply and animation events still fire, and the !important flags beat component styles. It does not limit the iteration count, so add animation-iteration-count: 1 !important if the page has looping animations.