REFERENCE · RESPONSIVE DESIGN
Breakpoint Reference
Common device widths, screen sizes, and responsive breakpoints for iOS, Android, and desktop
CSS Framework Breakpoints
Click any row to copy the media query
Tailwind sm
640px
Bootstrap sm
576px
Tailwind md
768px
Bootstrap md
768px
Tailwind lg
1024px
Bootstrap lg
992px
Tailwind xl
1280px
Bootstrap xl
1200px
Tailwind 2xl
1536px
Bootstrap xxl
1400px
Device Width Map
CSS viewport widths (logical pixels) — click to copy
iOS Device Screens
| Device | Logical | Physical | Scale |
|---|---|---|---|
| iPhone SE | 375×667 | 750×1334 | @2x |
| iPhone 14 | 390×844 | 1170×2532 | @3x |
| iPhone 15 | 393×852 | 1179×2556 | @3x |
| iPhone 15 PM | 430×932 | 1290×2796 | @3x |
| iPad Mini | 768×1024 | 1536×2048 | @2x |
| iPad Air | 820×1180 | 1640×2360 | @2x |
| iPad Pro 11″ | 1024×1366 | 2048×2732 | @2x |
Android Device Screens
| Device | Logical | Physical | Density |
|---|---|---|---|
| Pixel 8 | 412×915 | 1080×2400 | xxhdpi |
| Pixel 8 Pro | 448×998 | 1344×2992 | xxhdpi |
| Galaxy S24 | 360×780 | 1080×2340 | xxhdpi |
| Galaxy S24 Ultra | 412×915 | 1440×3120 | xxxhdpi |
| Galaxy Tab S9 | 800×1280 | 1600×2560 | xhdpi |
| OnePlus 12 | 412×915 | 1240×2772 | xxhdpi |
Recommended Breakpoint Strategy
A practical 5-breakpoint system — click to copy the media query
XS · Phone
< 480px
Single column, stacked layout
SM · Large phone
480–767px
Wider single or 2-col
MD · Tablet
768–1023px
2-column grid
LG · Laptop
1024–1439px
3-4 column, sidebar
XL · Desktop
≥ 1440px
Full layout, max-width
Desktop & Monitor Resolutions
| Name | Resolution | Aspect | Use |
|---|---|---|---|
| HD (720p) | 1280×720 | 16:9 | Budget laptops, older displays |
| Full HD (1080p) | 1920×1080 | 16:9 | Most common desktop resolution |
| QHD (1440p) | 2560×1440 | 16:9 | Design/dev monitors, MacBook Pro |
| 4K UHD | 3840×2160 | 16:9 | High-end monitors, creative work |
| 5K | 5120×2880 | 16:9 | Apple Studio Display, iMac |
| Ultrawide | 3440×1440 | 21:9 | Ultrawide monitors, cinema |
| Super Ultrawide | 5120×1440 | 32:9 | Samsung G9, dual-screen replacement |