Breakpoint · Reference
Breakpoints
Real CSS framework breakpoints, device widths, and monitor resolutions. Click any row to copy. Runs in your browser — no server call, no tracking.
CSS Framework Breakpoints
Click any row to copy the media query
Tailwind sm640pxBootstrap sm576px
Tailwind md768pxBootstrap md768px
Tailwind lg1024pxBootstrap lg992px
Tailwind xl1280pxBootstrap xl1200px
Tailwind 2xl1536pxBootstrap xxl1400px
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 |