What does "mobile-first" mean for these breakpoints?

Mobile-first means you write base styles for the smallest screen and then layer on overrides as the viewport gets wider, using min-width media queries. Each breakpoint here is a name plus the min-width at which it activates, so a breakpoint named md at 768px applies at 768px and up. Any width below your first breakpoint is the un-prefixed base range, which is why the tester shows "base" rather than a name for narrow widths.

Which breakpoint is "active" at a given width?

The active breakpoint is the one with the largest min-width that is still less than or equal to your test width. For the Tailwind set (sm 640, md 768, lg 1024, xl 1280, 2xl 1536), a width of 800px is in md, because md (768) is the largest min-width at or below 800 and lg (1024) has not been reached yet. Exactly at a boundary the new breakpoint takes over, so 768px is md, not sm.

What are the differences between the framework presets?

Tailwind uses sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Bootstrap 5 uses sm 576, md 768, lg 992, xl 1200, xxl 1400. Material 3 uses window size classes — compact 0, medium 600, expanded 840, large 1240, xlarge 1600. Bulma uses mobile 0, tablet 769, desktop 1024, widescreen 1216, fullhd 1408. The presets that start at 0 (Material, Bulma) include an explicit base tier; the tester skips a zero-width tier when emitting media queries because it needs no min-width rule.

When should I output breakpoints in rem instead of px?

rem-based breakpoints scale with the user root font-size, so someone who increases their browser default text size also shifts the breakpoints, which can keep layouts comfortable for them. Tailwind v4 ships its default screens in rem for this reason. Switch the unit to rem and set the rem base (16px by default) and every generated artifact — CSS, SCSS, Tailwind config, and the JS object — converts against that base, so 768px becomes 48rem at a 16px base.

What is the difference between the CSS @media and container-query output?

The CSS @media output uses @media (min-width: ...) blocks that respond to the viewport width. The container-query output uses @container (min-width: ...) blocks that respond to the size of a containing element instead. Container queries are ideal for reusable components that should adapt to whatever slot they are placed in, rather than to the whole page. Both use the same named breakpoints and units, so you can adopt either approach with the same scale.

Can I build a completely custom breakpoint set?

Yes. Choose Custom, or just start editing any preset — renaming a breakpoint, changing a min-width, or adding and removing rows automatically switches the set to Custom. You can have as many or as few breakpoints as you like, name them anything, and the generators will emit matching code in your chosen unit. The full custom set is encoded in the shareable URL so you can save or hand it off.

Mobile Breakpoint Tester

Drag a test width along a live ruler to see exactly which named breakpoint a device lands in — then copy the matching CSS @media, container queries, SCSS map + mixin, Tailwind v3/v4 config, or a typed JS object. Start from Tailwind, Bootstrap 5, Material 3, or Bulma, or build a custom mobile-first set in px or rem.

About this ToolHow it works, benefits & use cases

Most breakpoint references just list numbers in a table. This tester is interactive: drag a test width along a live ruler and watch which named breakpoint a device actually lands in, then copy out the exact code that matches your set. It is mobile-first by design, so every breakpoint is a name plus a min-width (the way Tailwind, Bootstrap, Material 3, and Bulma really define them) and the active breakpoint for any width is the largest min-width at or below it. Pick a framework preset or build a fully custom set: add, rename, and re-size breakpoints in px or rem. The sticky output panel shows the active breakpoint, a colored segment ruler with a draggable marker, and a scaled device-frame preview, plus generated CSS @media queries, container queries, an SCSS map with a respond-to mixin, Tailwind v3 and v4 config, or a typed JavaScript object. A device catalogue lets you jump the test width to any common phone, tablet, or desktop in one click, and the whole configuration lives in a shareable URL.

How to Use

1Pick a framework — Tailwind CSS, Bootstrap 5, Material 3, or Bulma — or choose Custom to start editing.
2Drag the ruler marker or move the test-width slider to see which named breakpoint that width falls into.
3Click a device in the catalogue to snap the test width to that device exact CSS width.
4Edit the breakpoint list: rename, set a new min-width, add, or remove rows (this switches the set to Custom).
5Switch the unit to rem and set a rem base if you want scalable breakpoints, then choose an export format.
6Copy the generated CSS, SCSS, Tailwind config, or JS object, or share the URL to hand the exact setup to a teammate.

Key Benefits

Live ruler with a draggable marker shows exactly which breakpoint any width activates
Four canonical framework presets plus a fully editable custom set
Six export targets: CSS @media, container queries, SCSS map + mixin, Tailwind v3, Tailwind v4, and a typed JS object
px or rem output with a configurable rem base, applied consistently across every format
A scaled device-frame preview and a list of which catalogue devices land in the active breakpoint
One-click device jumps for common phones, tablets, and desktops
Mobile-first min-width model that matches how real CSS frameworks work
Entire configuration captured in a shareable URL

Common Use Cases

Deciding the right breakpoint to use when a layout breaks at a specific device width
Generating a consistent breakpoint set for a new design system in CSS, SCSS, or Tailwind
Migrating an existing px breakpoint scale to rem so it scales with user font-size
Producing container-query equivalents of your media-query breakpoints
Checking whether a given phone or tablet falls into your sm, md, or lg tier
Sharing a proposed breakpoint set with a teammate via a single URL

Active breakpoint at 390px

base

no media query (base styles)

Breakpoint ruler

2xl

390

01690px

Preview at 390px

base

Generated breakpoints

css · breakpoints.css

/* Mobile-first breakpoints (min-width) */

/* sm >= 640px */
@media (min-width: 640px) {
  /* ... */
}

/* md >= 768px */
@media (min-width: 768px) {
  /* ... */
}

/* lg >= 1024px */
@media (min-width: 1024px) {
  /* ... */
}

/* xl >= 1280px */
@media (min-width: 1280px) {
  /* ... */
}

/* 2xl >= 1536px */
@media (min-width: 1536px) {
  /* ... */
}

Framework

Tailwind v3/v4 default screens — sm, md, lg, xl, 2xl.

Test width & units

Test width: 390px

Exact width

Output unit

Export format

Breakpoints

Name

min-width

Name

min-width

Name

min-width

Name

min-width

Name

min-width

Devices in base

No catalogue devices fall in this range.

Jump to a device

phones

tablets

desktops

Mobile-first, min-width breakpoints

Every modern CSS framework defines breakpoints as min-widths and styles up from the smallest screen. A breakpoint named md at 768pxmeans “768px and wider.” This tester treats your set the same way: the active breakpoint for any width is the largest min-width at or below it, and anything below your first breakpoint is the un-prefixed base range.

px or rem?

Tailwind v4 ships its default screens in remso they scale with the user’s root font-size, which is friendlier to people who bump up their browser text size. Toggle the unit here and every generated artifact — CSS, SCSS, Tailwind config, JS — converts against your chosen rem base.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Mobile Breakpoint Tester

How to Use

Key Benefits

Common Use Cases

Breakpoint ruler

Preview at 390px

Framework

Test width & units

Breakpoints

Devices in base

Jump to a device

phones

tablets

desktops

Mobile-first, min-width breakpoints

px or rem?

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Mobile Breakpoint Tester