Hey Media Queries Breakpoints play the main role in responsive design. Here we gonna discuss the most standard way in 2022
Everyone needs to accept many developers still have a lot of confusion for the responsive
Screen resolution?
CSS3 Media Queries?
Device width?
Screen Sizes?
And so on.
So now we gonna discuss standard media queries breakpoints for the front end development, just cool. use this following breakpoints and kick start your UI development from scratch 😉
Using min-width
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Using max-width
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
Devices
Mostly looked at Apple devices. While Android-based devices are important too, they have a lot of variances in most phones. I hope it’s not a big deal for you.
| Device Category | Breakpoint Width | Device Name |
|---|---|---|
| Mobile, portrait | 320px | iPhone SE |
375px | iPhone 6 to X | |
414px | iPhone 8 Plus | |
| Mobile, landscape | 568px | iPhone SE |
667px | iPhone 6 to 8 | |
736px | iPhone 8 Plus | |
812px | iPhone X | |
| Tablet, portrait | 768px | iPad Air, iPad Mini, iPad Pro 9″ |
834px | iPad Pro 10″ | |
| Tablet, landscape | 1024px | iPad Air, iPad Mini, iPad Pro 9″ |
1024px | iPad Pro 12″ (portrait) | |
1112px | iPad Pro 10″ | |
| Laptop displays | 1366px | HD laptops (768p) |
1366px | iPad Pro 12″ (landscape) | |
1440px | 13″ MacBook Pro (2x scaling) | |
| Desktop displays | 1680px | 13″ MacBook Pro (1.5x scaling) |
1920px | 1080p displays |
Note: Use flux box concepts, It will be nice for you 🙂
Thanks for the great resource!
Why “@media (max-width: 575.98px) { … }” and not “@media (max-width: 575px) { … }” or “@media (max-width: 575.99px) { … }”?
@media (max-width: 575.98px) { … } – Here we are giving .02 px for next breakpoint
@media (max-width: 575px) { … } – Here we are not providing any gap b/w other breakpoint
@media (max-width: 575.99px) { … } Here we are giving .01 px for next breakpoint
What about 4K or 8K these days? The need extra large Elements and sometimes even another layout so the Website doesnt seem empty. I dont mean TV-Screens, i have a 4K Screen as Desktop-Monitor for example.
It will work with large screen devices also, let me know if you are facing any issue 🙂
That is a good ttip especially too those new too the blogosphere.
Brief but very precise information… Thanks for sharing this one.
A must read post!
Thanks so much. very helpful
Thanks lolade
Fantastic resource! Thank you