Responsive Breakpoint Calculator
Which Breakpoint a Given Screen Actually Falls Into
Responsive design lives or dies on breakpoints — the viewport widths where a layout switches from one arrangement to another. Rather than memorizing a framework's breakpoint table, this calculator takes a viewport width and immediately tells you which range it falls in, plus the em-unit equivalent that media queries often use instead of raw pixels.
The Breakpoint Scale
| Label | Range | Typical device |
|---|---|---|
| Extra Small (xs) | 0–575px | Phones |
| Small (sm) | 576–767px | Large phones |
| Medium (md) | 768–991px | Tablets |
| Large (lg) | 992–1199px | Small desktops |
| Extra Large (xl) | 1200–1399px | Desktops |
| Extra Extra Large (xxl) | 1400px and up | Large desktops |
The Formula
Media queries are sometimes written in em units rather than pixels, since em-based breakpoints scale relative to the user's browser font size settings rather than staying fixed — a practice some accessibility guidelines recommend for better support of users who increase their default text size.
Where This Matters
- Debugging layout breaks — when a design looks wrong at a specific window width, checking which named breakpoint that width falls into quickly narrows down which CSS media query is responsible.
- Writing consistent media queries — using an established breakpoint scale across a project (rather than ad hoc pixel values scattered through the codebase) keeps responsive behavior predictable and maintainable.
- Converting to em-based queries — teams migrating from pixel to em breakpoints need the conversion factor to preserve the same effective visual breakpoints.
How to Use This Calculator
- Enter the Viewport Width in pixels.
- Enter the Base Font Size in pixels (optional, defaults to 16).
- Select Calculate to see the matched breakpoint and its em equivalent.
Related Calculations
Plan exact column widths within a breakpoint using the CSS Grid Calculator, or estimate load performance at that viewport with the Page Load Time Calculator.