Common Screen Breakpoints in CSS
From the Screen Sizes & Responsive Breakpoints cheat sheet · Standard Breakpoints & Device Sizes · verified Jul 2026
Common Screen Breakpoints
Standard responsive breakpoints for mobile, tablet, and desktop layouts
css
/* Standard Breakpoints */
/* Mobile First Approach */
@media (min-width: 320px) { /* Mobile Small */ }
@media (min-width: 480px) { /* Mobile Large */ }
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1200px) { /* Large Desktop */ }
@media (min-width: 1440px) { /* Extra Large */ }
/* Desktop First Approach */
@media (max-width: 1439px) { /* Below XL */ }
@media (max-width: 1199px) { /* Below Large */ }
@media (max-width: 1023px) { /* Below Desktop */ }
@media (max-width: 767px) { /* Below Tablet */ }
@media (max-width: 479px) { /* Below Mobile Large */ }📱 Start with mobile-first design (min-width breakpoints)
💻 Common breakpoints: 768px (tablet), 1024px (desktop)
🖥️ Large screens: 1440px+, Ultra-wide: 1920px+
💡 Use rem/em for breakpoints to respect user zoom
⚡ Test on real devices, not just browser DevTools
✅ Consider content-based breakpoints over device-specific