Breakpoint definition
A breakpoint in web design is a screen or container width at which a responsive layout changes, for example from one column to three. Breakpoints are set in CSS with media queries or container queries. In programming, a breakpoint is also a marker that pauses code in a debugger.
A responsive site serves the same HTML to every device and adjusts its layout to the space available. Breakpoints are the widths where those adjustments happen: the navigation collapses into a menu button, a three-column grid drops to one, the image moves under the heading instead of beside it.
In CSS a breakpoint is usually a media query such as @media (min-width: 48rem). Newer range syntax lets you write the same thing as @media (width >= 48rem). Mobile-first CSS uses min-width and adds styles as the screen grows. Desktop-first CSS uses max-width and overrides styles as it shrinks.
What are common breakpoint widths?
There is no standard set. Frameworks ship defaults, and many sites keep them:
- Tailwind CSS: 640, 768, 1024, 1280 and 1536 pixels (sm to 2xl), defined in rem since version 4.
- Bootstrap 5: 576, 768, 992, 1200 and 1400 pixels.
- Webflow: styles start from desktop and cascade down to tablet at 991 pixels, mobile landscape at 767 and mobile portrait at 478. Larger breakpoints at 1280, 1440 and 1920 are optional.
These numbers reflect common device sizes from when each framework was designed. Treat them as a starting grid. Your content decides whether they fit.
How do you choose breakpoints?
Start with the narrowest layout, widen the browser window slowly and add a breakpoint where the design starts to look wrong: lines get too long to read, cards stretch, or a gap opens up that the layout wasn't designed for. If a component breaks at 870 pixels, it needs a breakpoint at 870, whatever the framework's list says.
Writing media queries in em or rem instead of px means they also respond when someone raises the browser's default font size. And fewer breakpoints are easier to maintain. Fluid type and spacing with clamp(), plus grids built with repeat(auto-fit, minmax(...)), adapt continuously and remove a lot of in-between fixes.
Media queries or container queries?
Media queries respond to the viewport. Container queries (@container) respond to the size of a parent element, so a card component can switch layout based on the space it actually has, whether it sits in a narrow sidebar or a full-width section. All major browsers have supported size container queries since 2023, which makes them the better fit for reusable components. Page-level layout still belongs in media queries.
What is a breakpoint in debugging?
In programming, a breakpoint is a marker you set on a line of code. When execution reaches it, the debugger pauses so you can inspect variables and step through the code line by line. In browser DevTools you set one by clicking a line number in the source view, and writing the debugger statement in JavaScript does the same from inside the code.
Related terms
- TypographyTypography is the craft of choosing and arranging type so text is easy to read and its hierarchy is obvious. It covers typeface, size, line height, line length and spacing. On a website it also covers how fonts load and how text scales between screen sizes.
- PaginationPagination is splitting a long list of content, such as blog posts, products or search results, into separate pages that visitors move between with numbered links or next and previous buttons. APIs use pagination too, returning large result sets one chunk at a time.
- KeyframeA keyframe is a point in an animation where you define exactly how something looks, such as its position, scale or opacity. The software or browser calculates the frames in between. In CSS, the @keyframes rule lists those points for an animation.