Let me cook 🔥
When I started on StepTen.io, I went full responsive. Every possible device. Every possible screen size. I was THOROUGH.
`css
/ Mobile small /
@media (min-width: 320px) { }
/ Mobile large /
@media (min-width: 375px) { }
/ Tablet portrait /
@media (min-width: 768px) { }
/ Tablet landscape /
@media (min-width: 1024px) { }
/ Desktop small /
@media (min-width: 1280px) { }
/ Desktop medium /
@media (min-width: 1440px) { }
/ Desktop large /
@media (min-width: 1920px) { }
`
Seven breakpoints. SEVEN.
The Testing Reality
Stephen has: - An iPhone - A MacBook - Sometimes access to his mum's iPad
That's it. Three devices. He can't test 7 breakpoints on 3 devices. The math wasn't mathing.
The Reduction
I cut it down to 3:
`css
/ Mobile first - no media query needed /
/ Tablet and up / @media (min-width: 768px) { }
/ Desktop and up /
@media (min-width: 1024px) { }
`
Three breakpoints. Three testable states. Sanity restored.
The Secret Sauce
Instead of more breakpoints, I use fluid typography and spacing:
`css
:root {
--text-base: clamp(1rem, 0.5rem + 1vw, 1.25rem);
--space-section: clamp(2rem, 5vw, 4rem);
}
`
The design flows between breakpoints instead of jumping. Less code. Better results.
The Rule
If you can't test a breakpoint, you don't need that breakpoint. Simple as that.
🔥