RWD Breakpoints
A breakpoint is the specific viewport width at which a responsive layout's media queries kick in and restructure the page for the next size range.
What Is a Breakpoint?
A breakpoint is just the width value used inside a media query, the number where your design 'breaks' from one arrangement into another. If you write @media (max-width: 600px), then 600px is a breakpoint for that design. Most responsive sites use a small handful of breakpoints, commonly somewhere between two and five, rather than a unique media query for every possible screen size.
These numbers are useful as a rough starting reference, but they should never be treated as fixed rules, because new device sizes appear constantly and there's no single 'phone width' or 'tablet width' anymore. The more reliable, and honestly more common, professional approach is to let your own content decide where the breakpoints go, rather than targeting specific device categories.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.grid > * {
flex: 1 1 260px;
}
@media (max-width: 700px) {
.grid {
gap: 8px;
}
}
@media (max-width: 480px) {
.grid > * {
flex-basis: 100%;
}
}
</style>
</head>
<body>
</body>
</html>Content-Based Breakpoints
The recommended way to choose a breakpoint is to open the page in a browser and slowly drag the window from wide to narrow, watching for the exact moment the design starts to look wrong: text lines becoming uncomfortably long or short, a navigation bar's items wrapping messily, or an image being squeezed too small to read. Whatever width the problem first appears at is where you add a media query to fix it. This means breakpoints will be different for every project, because they depend on your specific content, font sizes, and column count, not on any particular device.
- Paragraph text lines become too long to read comfortably (a rough rule of thumb is 50-75 characters per line)
- A multi-column layout runs out of room and columns get uncomfortably narrow
- A navigation menu's items start wrapping onto a second row
- Images or form fields shrink below a usable, tappable size
- Whitespace and padding start feeling disproportionately large or small relative to the content
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 48em is roughly 768px at the default 16px font size,
but it scales correctly if the user changes their base font size */
@media (max-width: 48em) {
.nav {
flex-direction: column;
}
}
</style>
</head>
<body>
</body>
</html>- Build the layout first at the smallest screen size you support
- Widen the browser gradually until the design starts to look wrong
- Add a media query breakpoint exactly at that width to fix the issue
- Keep widening and repeat, adding a breakpoint only where content actually demands one
- Review the final set of breakpoints and consolidate any that are very close together
