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

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 🙂