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.