Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.
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 best practices, but I decided this time to design mobile-first.
That means my base CSS (without any media query) targets the mobile portrait case, and then I add breakpoints for larger and larger devices, avoiding max-width in media queries.
I used to do the opposite—design for bigger screens first, then go smaller—but designing mobile-first and using min-width is now the most accepted approach.
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) {
}