What is a breakpoint in responsive design?

CSSJunior~1 min read

A breakpoint is a control screen width at which the layout starts to change its behavior via media queries. Essentially, it is a "turning point" where the interface rearranges itself for a new device (mobile, tablet, laptop, desktop).

What this looks like in practice:

css

@media (max-width: 768px) {
  /* styles for devices with a screen ≤ 768px */
}

Where 768px is the breakpoint.

What breakpoints are for:

rearrange the grid;
change the size of elements;
simplify navigation on mobile;
adapt fonts, spacing, and components.

Typical breakpoints (guidelines):

320-480px: mobile
768px: tablets
1024-1280px: laptops
1440px+: desktops

Summary: a breakpoint is a point where the layout changes, used together with media queries for a responsive interface.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.