Breakpoint
Also called: Responsive breakpoint, Media query
A screen width where a responsive layout changes, for example from one column to two.
Definition
Responsive sites use breakpoints (such as 640, 768, 1024 px) to rearrange content. Bugs cluster just around them, so testers check widths slightly below and above each breakpoint, not just common device sizes. (Not to be confused with a proxy breakpoint, which pauses a network request.)
In practice
At exactly 768 px the navigation menu disappears and the hamburger icon hasn't appeared yet, so there is no menu at all.
Learn it in context
Lessons that use this term.
Related terms
- Responsive designA website layout that adapts to different screen sizes, from phones to large monitors.
- ViewportThe visible area of a web page in the browser window or on the device screen.
- Window size classAndroid's width buckets (compact, medium, expanded) used to choose a layout.
- Boundary value analysisTesting values at and just around the edges of valid ranges, where bugs love to hide.