Responsive Design: Media Queries, Fluid Layouts, and Breakpoints

30‑second interview answer

Responsive design means building UIs that adapt to different screens using fluid layouts, flexible media, and media queries when necessary. A good strategy is mobile-first: start with the smallest layout, then add breakpoints based on content needs—not based on specific devices.

Mobile-first approach

.card { padding: 12px; }
 
@media (min-width: 768px) {
  .card { padding: 20px; }
}

You start small and enhance.

Prefer fluid sizing over fixed

Use:

• % for widths
• rem for typography and spacing
• clamp() for fluid typography

Example:

h1 {
  font-size: clamp(28px, 4vw, 48px);
}

Breakpoints: choose by content

Bad reasoning:

• “iPhone breakpoint, iPad breakpoint…”

Good reasoning:

• “Layout breaks at ~680px because the card becomes cramped.”

Responsive images

• Use max-width: 100% to prevent overflow.

img { max-width: 100%; height: auto; }

Common pitfalls

1. Hardcoding too many breakpoints
2. Fixed heights causing overflow
3. Using px everywhere for fonts

Mini Q&A

Q1: What is mobile-first?

• Base styles for small screens, add min-width queries.

Q2: When do you add a breakpoint?

• When the content/layout needs it.

Q3: Why use clamp()?

• Fluid typography without many breakpoints.

Summary checklist

• I use mobile-first.
• I prefer fluid layouts.
• My breakpoints are content-driven.
• Images never overflow containers.