{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "What are standard breakpoints?", "acceptedAnswer": { "@type": "Answer", "text": "Common ones are 320px (mobile), 768px (tablet), 1024px (laptop), 1280px+ (desktop)." } }, { "@type": "Question", "name": "Should breakpoints be device-specific?", "acceptedAnswer": { "@type": "Answer", "text": "Best practice is to set breakpoints where the content breaks, not for specific devices." } }, { "@type": "Question", "name": "How many breakpoints should a site have?", "acceptedAnswer": { "@type": "Answer", "text": "Typically 3–5 are sufficient for most projects." } } ] }
Definition

What Is a Breakpoint in Responsive Design?

A specific viewport width at which a website's layout changes to accommodate different screen sizes. Defined in CSS using media queries.

Related Terms

Responsive Design

Mobile First

Viewport

Above the Fold

Accessibility (A11y)

Example

A common breakpoint set at 768px causes a desktop three-column grid to collapse to a single-column mobile layout.

Synonyms:

Media query breakpoint, Responsive threshold

Acronyms:

-