Breakpoints define how a layout adapts to different screen sizes. The main difference between desktop-first, tablet-first, and mobile-first strategies lies in the direction of design scaling and how media queries are applied.

1. Mobile-First Strategy

1
Start designing for small screens first, then progressively enhance for larger screens.
2
Uses min-width media queries to add styles as the viewport grows.
3
Encourages performance optimization since mobile styles load first.

Example: Mobile-First Approach

2. Desktop-First Strategy

1
Start with large screens and simplify layouts for smaller screens.
2
Uses max-width media queries to apply changes as the viewport shrinks.
3
Was common in early responsive designs but less efficient today for mobile performance.

Example: Desktop-First Approach

3. Tablet-First or Hybrid Strategy

1
Focuses on medium breakpoints (e.g., tablets) and adjusts up or down as needed.
2
Useful for web apps or designs where tablet use is primary.
3
Combines both min-width and max-width queries for flexible control.

Example: Tablet-Focused Hybrid Breakpoints

In summary, a mobile-first approach using min-width is the most widely adopted today because it prioritizes small devices and scales up gracefully. Desktop-first may still be used for legacy systems, while hybrid strategies work best for tablet-centric applications.

Difficulty: 5/10

Topics: responsive design, media queries, breakpoint strategy

Scenario Questions

0-2 years experience

1
You're given a simple landing page with a hero image. How would you set up CSS so that the layout switches at 768px for tablets and 1024px for desktops using a mobile‑first approach?
2
If a button looks fine on your phone but gets cut off on a tablet, what breakpoint would you adjust and why?

2-5 years experience

1
We have a product card component that looks good on mobile, but on tablets the grid collapses incorrectly. Walk me through how you'd debug the breakpoint definitions to fix it.
2
Our design system defines breakpoints at 600px, 900px, and 1200px, but the marketing team wants a new tablet breakpoint at 800px. How would you incorporate that without breaking existing desktop styles?

5-8 years experience

1
When scaling our site to support a new large‑screen TV experience, what considerations would you make about our existing mobile‑first breakpoint strategy, and how might you restructure the media queries to avoid specificity wars?
2
Explain how you would organize breakpoint variables and media query mixins in a large codebase to keep mobile, tablet, and desktop styles maintainable and performant.

8+ years experience

1
Our legacy monolithic CSS uses desktop‑first breakpoints, and we need to migrate to a mobile‑first approach across dozens of micro‑frontends. Describe the migration plan, tooling, and how you'd mitigate regression risk.
2
How would you design a cross‑team breakpoint policy that balances design fidelity on tablets, performance on low‑end mobiles, and future‑proofing for new device categories?

Follow-up Questions

❓What factors influence where you place a breakpoint?
❓How would you verify that changes don’t break existing layouts?
❓Can you describe any performance considerations with many media queries?