What is a CSS breakpoint?

A breakpoint is a specific viewport width at which a layout changes to better fit the screen. Frameworks define these as named sizes (sm, md, lg, etc.) and implement them via CSS media queries.

What is the default base font size for rem conversion?

Most browsers default to 16px, so 1rem equals 16px. The converter uses 16px by default but lets you change it to match your project's root font size.

What is the difference between em and rem?

rem (root em) is relative to the document root font size. em is relative to the nearest parent element's font size. For layout breakpoints, rem is preferred because it stays consistent regardless of nesting.

Does Tailwind CSS have an xs breakpoint?

No. Tailwind is mobile-first with no xs breakpoint — styles without a prefix apply to all screen sizes. The first breakpoint, sm, starts at 640px.

Which breakpoint should I use for tablets?

This varies by framework. Bootstrap and Tailwind both target tablets around md (768px). Material UI uses sm (600px) for small tablets. Test your design at your specific target device widths rather than relying on named breakpoints alone.

Responsive Breakpoint Helper

Name: Responsive Breakpoint Helper
Availability: InStock
Author: Nham Vu

Reference table of CSS framework breakpoints, px/em/rem converter, and CSS media query generator.

CSS Framework Breakpoints

Min-width values (px) at which each breakpoint activates. — means the breakpoint is not defined.

Framework	xs	sm	md	lg	xl	2xl
Tailwind CSS	—	640px	768px	1024px	1280px	1536px
Bootstrap 5	<576px	576px	768px	992px	1200px	1400px
Material UI	0px	600px	900px	1200px	1536px	—
Bulma	—	769px	1024px	1216px	1408px	—
Foundation	—	640px	1024px	1200px	—	—

px / em / rem Converter

Convert between pixel, em, and rem values. Adjust the base font size to match your project.

Value

Unit

Base font size (px)

16px

1em

rem

1rem

Media Query Generator

Enter min and/or max widths in pixels to generate a CSS media query string.

Min-width (px)

Max-width (px) (optional)

Copied!

Summary

Reference table of CSS framework breakpoints, px/em/rem converter, and CSS media query generator.

How it works

The breakpoint table lists min-width values for xs through 2xl across five major CSS frameworks.
The converter takes a numeric value and a unit (px, em, or rem), then calculates the equivalent in the other two units using the base font size.
The media query generator accepts a min-width and an optional max-width in pixels, then outputs the complete @media rule with a copy button.

Use cases

Check which breakpoint maps to a specific pixel width across Tailwind, Bootstrap, and other frameworks.
Convert a designer's pixel spec to rem values before writing CSS.
Generate a scoped media query for a component without memorising exact syntax.
Compare Bootstrap 5 and Tailwind breakpoints side by side when migrating between frameworks.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu