What are good CSS Breakpoint values for Responsive Design?
The optimal CSS breakpoint values I use in my projects
While designing a site, I noticed I was using some pretty random values for my CSS breakpoints. Sometimes a rounded value like 800 or 1200, sometimes a specific value up to the pixel like 672.
I searched for the proper values to apply to my breakpoints going forward.
I had a little bit of time to look this up, and I came to this conclusion.
We have 5 major device sizes to worry about:
- mobile portrait
- mobile landscape
- tablet portrait
- tablet landscape
- laptop
Those devices map to those pixel values:
- mobile portrait: less than 640px
- mobile landscape: > 640px
- tablet portrait: > 768px
- tablet landscape: > 1024px
- laptop: > 1280px
I took those values from the Tailwind defaults.
I am not a designer, so I’m not involved daily in the best practices, but I decided this time to design mobile first.
Which means my CSS, without any media query, is going to design for the mobile portrait use case, and then adding breakpoints I’ll design for devices that are bigger and bigger, banning the max-width
from media queries.
I think I always went for the opposite route: design for bigger screens, which is what I use the most, and then go smaller, but designing mobile-first and using min-width
seems the most accepted and used solution nowadays.
These are the media queries I will use from now on:
@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1280px) {
}
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025