CSS Media Queries & Responsive Breakpoints

Here's a list of standard breakpoints used in responsive web design to target different screen sizes.

Device	Typical Breakpoint	CSS Media Query Example
Mobile Devices (Portrait)	320px — 600px	@media (max-width: 600px) { ... }
Tablets (Portrait)	601px — 900px	@media (min-width: 601px) and (max-width: 900px) { ... }
Tablets (Landscape) & Small Laptops	901px — 1200px	@media (min-width: 901px) and (max-width: 1200px) { ... }
Laptops & Desktops	1201px — 1800px	@media (min-width: 1201px) and (max-width: 1800px) { ... }
Large Monitors & TVs	1801px and up	@media (min-width: 1801px) { ... }
Common 'sm' Breakpoint	640px	@media (min-width: 640px) { ... }
Common 'md' Breakpoint	768px	@media (min-width: 768px) { ... }
Common 'lg' Breakpoint	1024px	@media (min-width: 1024px) { ... }
Common 'xl' Breakpoint	1280px	@media (min-width: 1280px) { ... }
Common '2xl' Breakpoint	1536px	@media (min-width: 1536px) { ... }
Device Orientation (Landscape)	N/A	@media (orientation: landscape) { ... }
Device Orientation (Portrait)	N/A	@media (orientation: portrait) { ... }
High-Resolution (Retina)	N/A	@media (min-resolution: 2dppx), (min-resolution: 192dpi) { ... }