What is a good CSS breakpoint value for responsive design?

The best CSS breakpoint value I use in my project

While designing the site, I noticed that I used some very random values for CSS breakpoints. Sometimes it is rounded, such as 800 or 1200, and sometimes it is up to a specific value of the pixel, such as 672.

I searched for the appropriate value for future breakpoints.

I spent a little time checking it and came to this conclusion.

We have 5 main equipment sizes to worry about:

Phone portrait
Mobile landscape
Tablet portrait
Tablet landscape
laptop

These devices are mapped to these pixel values:

Mobile portrait: less than 640 pixels
Mobile landscape:> 640px
Tablet portrait:> 768 pixels
Tablet landscape:> 1024px
Laptop:> 1280 pixels

I'm fromTail wind default.

I'm not a designer, so I don't participate in best practices every day, but I decided to design mobile devices first this time.

This means that my CSS (without any media queries) will be designed for the mobile portrait use case, and then add breakpoints that I will design for larger and larger devices, thereby prohibitingmax-widthFrom media queries.

I think I always go the opposite route: design a bigger screen (this is the screen I use most often), then shrink the screen, but first design a mobile device and usemin-widthIt seems to be the most accepted and used solution today.

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

Download mine for freeCSS Manual

What is a good CSS breakpoint value for responsive design?

The best CSS breakpoint value I use in my project

More CSS tutorials: