Skip to content

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:

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

}

→ Here's my latest YouTube video

→ Get my CSS Handbook

→ 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

Bootcamp 2025

Join the waiting list