You met media queries in the beginner level. Now let us turn them into a real workflow. Professional responsive design is not about a few breakpoints bolted on at the end — it is a mobile-first mindset from the start.
Mobile-first: why and how
Mobile-first means you write the base CSS for small screens, then use <code>min-width</code> media queries to progressively add complexity for larger screens. The base layout is simplest, phones load less work, and each breakpoint only adds what it needs.
- Base = desktop
- max-width queries shrink down
- More overrides, more bugs
- Base = mobile
- min-width queries build up
- Cleaner, faster on phones
Choosing breakpoints
Do not chase specific devices. Pick a few sensible widths where your layout naturally needs to change — common choices are around 600px (tablet), 900px (small laptop) and 1200px (desktop). Add a breakpoint when the design breaks, not because a device exists.
<div class="grid"><div>A</div><div>B</div><div>C</div></div>/* mobile-first base: one column */
.grid{display:grid;gap:10px}
.grid div{background:#2563eb;color:#fff;padding:20px;border-radius:8px;text-align:center}
/* build up for wider screens */
@media (min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}Fluid beats fixed
The fewer breakpoints you need, the better. Fluid techniques — percentage/fr widths, <code>clamp()</code> for type, and <code>auto-fit</code> grids — adapt continuously, so you only add media queries for bigger structural changes.
/* desktop base, then... */
@media (max-width:600px){ /* override everything */ }/* mobile base, then... */
@media (min-width:600px){ /* add complexity */ }Designing desktop-first then trying to cram it into phones, producing a pile of max-width overrides. Start mobile-first instead.
Start mobile-first, use fluid layouts (fr, %, clamp, auto-fit) so you need fewer breakpoints, and test by slowly narrowing your browser from desktop to phone width.
Build a card grid that is one column by default and becomes three columns from 600px up using a min-width media query. Add a heading that uses clamp() so it scales without a breakpoint.
1. Mobile-first means…
2. When should you add a breakpoint?
3. What reduces the number of breakpoints you need?
- Mobile-first: base styles for small screens, build up with min-width.
- Choose breakpoints where the design breaks, not per device.
- Fluid layouts (fr, %, clamp, auto-fit) reduce the breakpoints you need.
- Test by narrowing your browser from desktop to phone.