What Are Good CSS Breakpoint Values for Responsive Design?

In my experience as a developer, I have often found myself using random values for CSS breakpoints while designing a website. Sometimes I would use rounded values like 800 or 1200, while other times I would specify exact pixel values like 672. It occurred to me that I should look for proper values to use for my breakpoints in order to improve the responsiveness of my designs.

After doing some research, I have come to the conclusion that there are 5 major device sizes that we need to consider for responsive design:

Mobile portrait: Less than 640px
Mobile landscape: Greater than 640px
Tablet portrait: Greater than 768px
Tablet landscape: Greater than 1024px
Laptop: Greater than 1280px

These values are commonly used and are taken from the Tailwind CSS library’s default breakpoints.

While I am not a designer and may not be aware of all the best practices, I have decided to follow the mobile-first approach this time. This means that I will design my CSS without any media query, focusing on the mobile portrait use case. Then, I will add breakpoints and design for larger devices, gradually moving from smaller to bigger screens. This approach is becoming increasingly accepted and popular among designers, as it allows for a more efficient and effective responsive design process.

For future projects, I will be using the following media queries:

@media (min-width: 640px) {

}

@media (min-width: 768px) {

}

@media (min-width: 1024px) {

}

@media (min-width: 1280px) {

}

By using these CSS breakpoints, I can better optimize the design and ensure a smoother user experience across different devices.