Breakpoints

Definition

The specific pixel values defined in media queries where a website's layout 'breaks' and transforms into a new layout to accommodate a different device size.

Explain Like I'm New

Breakpoints are the invisible lines in the sand. When the screen shrinks past 768px, BOOM, the layout snaps to a mobile view. 768px is the 'breakpoint'.

Real World Example

Standard industry breakpoints are usually: 640px (Phones), 768px (Tablets), 1024px (Laptops), and 1280px+ (Desktops).

Common Use Cases

•Tailoring UX for specific devices (iPad vs iPhone)

Interactive Example

Interview Questions

basic

Do you have to use exact device widths (like 375px for iPhone) for breakpoints?

intermediate

What happens between breakpoints?

Flash Cards

Question

Exact device widths?

Click to reveal answer

Answer

No! This is a common beginner mistake. There are thousands of different Android phones. You should set breakpoints based on WHEN YOUR DESIGN BREAKS, not based on a specific phone model.

Question

Between breakpoints?

Click to reveal answer

Answer

Your layout should be 'fluid' (using percentages, flexbox, or grid) so it smoothly stretches and shrinks in the space between the rigid breakpoints.