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) {
}