Skip to content

What are good CSS Breakpoint values for Responsive Design?

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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:

Those devices map to those pixel values:

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

}
→ Get my CSS Handbook
→ Read my CSS Tutorial
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)