Media Queries Breakpoints

Media Queries Breakpoints For Responsive Design In 2024

Hey Media Queries Breakpoints play the main role in responsive design. Here we gonna discuss the most standard way in 2023

Everyone needs to accept many developers still have a lot of confusion for the responsive design.

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


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 CategoryBreakpoint WidthDevice Name
Mobile, portrait320pxiPhone SE
375pxiPhone 6 to X
414pxiPhone 8 Plus
Mobile, landscape568pxiPhone SE
667pxiPhone 6 to 8
736pxiPhone 8 Plus
812pxiPhone X
Tablet, portrait768pxiPad Air, iPad Mini, iPad Pro 9″
834pxiPad Pro 10″
Tablet, landscape1024pxiPad Air, iPad Mini, iPad Pro 9″
1024pxiPad Pro 12″ (portrait)
1112pxiPad Pro 10″
Laptop displays1366pxHD laptops (768p)
1366pxiPad Pro 12″ (landscape)
1440px13″ MacBook Pro (2x scaling)
Desktop displays1680px13″ MacBook Pro (1.5x scaling)
1920px1080p displays

Note: Use flux box concepts, It will be nice for you 🙂

Leave A Comment