HTML, CSS & the Browser

Breakpoint

Definition

In a rule such as @media (min-width: 768px), the breakpoint is 768px. Most projects settle on three or four: something around 480px for large phones, 768px for tablets, 1024px for laptops and occasionally 1280px or 1440px for wide screens. Those particular numbers are conventions inherited from popular frameworks rather than anything the browser knows about. Written mobile-first, each breakpoint is a min-width and the layout only ever adds: one column by default, two columns from 768px, three from 1024px. Breakpoints are declared in CSS pixels, which are not physical pixels — a modern phone reporting 390px wide has far more hardware pixels than that.

Why It Matters

Breakpoints chosen from a device list age badly, because the device list changes every year and never matched reality in the first place. Choosing them from the content does not: widen the browser slowly and watch for the point where a line of text passes about 75 characters, or a three-column row squeezes its cards below a usable width. That is where the breakpoint belongs, whatever number it lands on. Too few and there is a range of widths — usually 700px to 900px, the range tablets and split-screen windows sit in — where the page is stretched and ugly. Too many and every change has to be checked in five states instead of two, which is how a stylesheet becomes frightening to edit.

How It Works

Each breakpoint is a condition the browser tests against the current viewport and re-tests on every resize. Because a media query adds no specificity, the blocks are resolved by source order, so mobile-first ordering means min-width blocks must run from smallest to largest down the file. Mixing directions creates overlap: min-width: 768px and max-width: 768px are both true at exactly 768px, so pairs should be written as min-width: 768px against max-width: 767.98px, or better, only ever min-width. Not everything needs one — a grid using repeat(auto-fit, minmax(240px, 1fr)) rewraps on its own, and clamp() scales type smoothly, so a modern stylesheet often needs two or three breakpoints where an older one had six. To test, open device mode in developer tools and drag the viewport handle through each threshold rather than hopping between presets.

Real-World Example

A price list at joinery-rates.99helpers.site uses a single breakpoint at 1024px: one column below, three above. On a tablet held in portrait at 820px, the single column stretches each row to the full width and the prices drift far from their labels. Adding a two-column stage at 720px closes that gap, and the change is one min-width block inserted in the right place in the file. The rest of the stylesheet is untouched.

Common Mistakes

✕Picking breakpoints to match named devices — the iPhone or iPad width of the moment is a moving target, and the layout itself will tell you where it breaks if you resize slowly
✕Leaving the 700px to 900px band unconsidered — tablets in portrait and half-width desktop windows live there, and a layout that jumps straight from phone to laptop looks worst in exactly that range
✕Adding a breakpoint for every column count when the grid could rewrap itself — auto-fit with minmax handles several of them at once and needs nothing to keep in sync

Related Terms

Media Query

A media query is a block of CSS that only applies when a condition about the device is true — most often a minimum or maximum viewport width. It is the mechanism behind responsive design, written as @media followed by the condition and a set of rules in braces.

Viewport Units

Viewport units are CSS lengths measured as a percentage of the browser window: 1vw is one per cent of its width and 1vh one per cent of its height. They are how a section is made exactly as tall as the screen, and they behave awkwardly on mobile unless you use the newer dvh, svh and lvh variants.

Put a file online in seconds

Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.

Host a file free →