What is a breakpoint in responsive design?
Definition A breakpoint is a viewport width at which a responsive layout changes, written as the value in a CSS media query such as @media (min-width: 600px). Below it one set of rules applies, above it another. Good breakpoints are placed where the content starts to look wrong, not at the exact width of one device; today's phones are 344–440 CSS px wide and tablets about 690–1030 px.
Related guide: Responsive Breakpoints in 2026: Which Widths to Design For
How do breakpoints work?
A breakpoint is just the number inside a media query. The browser compares it with the current viewport width in CSS pixels and applies the rules inside when the condition is true. The layout between two breakpoints should be fluid, so it looks right at every width in that range, not only at the edges.
Which breakpoints should I use?
Popular frameworks use sets such as 576, 768, 992 and 1200 px (Bootstrap) or 640, 768, 1024 and 1280 px (Tailwind). They are reasonable defaults, but the better method is content-first: make the window narrower until the layout breaks, and add a breakpoint there. Real device widths cluster in a few groups:
| Group | Portrait CSS width |
|---|---|
| Small and older Android phones | 344–360 px |
| Small iPhones | 375 px |
| Current iPhones and many Android phones | 390–414 px |
| Large phones | 420–440 px |
| Tablets | 690–1032 px |
So a breakpoint at 400 px splits a group of very similar phones; one between 440 and 690 px separates phones from tablets cleanly.
Example
/* Phones by default; two columns from 600 px; sidebar from 1024 px */
.grid { display: grid; gap: 1rem; }
@media (min-width: 600px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid { grid-template-columns: 1fr 1fr 300px; } }Breakpoints written in em (37.5em = 600 px at the default font size) move with the browser's default font size in most browsers, which helps people who set larger text.
Breakpoints and container queries
Container queries (@container, supported in Chrome 105, Safari 16 and Firefox 110 and later) apply the same idea to a component: a card switches layout based on the width of its own container instead of the whole screen. Use viewport breakpoints for page layout and container queries for reusable components.
MobileCheck has no rule about where you put breakpoints; it shows the result on each real device width and flags content wider than the screen and overlapping or clipped text.
Related terms
Guides and tools
- Responsive Breakpoints in 2026: Which Widths to Design For
- CSS media query generator
- Mobile viewport sizes