Breakpoint

A breakpoint is the screen width at which a website layout changes to fit the screen. Breakpoints are the anchor points of responsive design: below or above a given width, a media query applies different styles so the same page stays readable on a phone, a tablet and a desktop.

How breakpoints work

A breakpoint is defined inside a media query, most often on viewport width, for example @media (min-width: 768px) { ... }. The browser recalculates the layout as the window crosses each breakpoint, rearranging columns, font sizes and spacing.

Common breakpoints

Most teams use a small, standard set rather than one per device.

Content-first versus device-first

Device-first breakpoints target known screen sizes. Content-first breakpoints are added wherever the layout starts to break, regardless of device. The content-first approach ages better because it does not chase an endless list of new devices.

Mobile-first breakpoints

A mobile-first setup writes the base styles for small screens, then uses min-width breakpoints to add complexity as the screen grows. It produces lighter CSS and matches how search engines index the mobile version first, which supports both performance and SEO.

Breakpoint versus media query

The two are related but not the same: a media query is the CSS rule that applies styles under a condition, and a breakpoint is the specific width value at which that rule takes effect. Breakpoints live inside media queries, and container queries now let components define their own breakpoints based on a parent's width.

Breakpoints at BeBranded

At BeBranded we set breakpoints where the content needs them, not around arbitrary devices, so a site stays clean from mobile to widescreen. It is part of the responsive craft in our design work.