Responsive Breakpoint Tester
Layout · IntermediatePick a framework preset – Tailwind, Bootstrap, Material Design, or iOS – and instantly see which real devices fall into each breakpoint range. Find gaps, compare systems, and export production-ready code.
Framework preset
Breakpoint ruler 0 – 2560px
Device coverage by breakpoint
| Breakpoint | Range (px) | Devices | Count |
|---|---|---|---|
| ⚠ gap | 0 – 639px | No breakpoint covers this range | – |
| sm | 640–767px | 📱 Galaxy Z Fold open (717px), 📲 iPad Mini (744px), 📲 Surface Go (720px) | 3 |
| md | 768–1023px | 📲 iPad Air (820px), 📲 iPad Pro 11" (834px), 📲 Galaxy Tab S8 (800px) | 3 |
| lg | 1024–1279px | 📲 iPad Pro 12.9" (1024px) | 1 |
| xl | 1280–1535px | 💻 MacBook Air 13" (1280px), 💻 MacBook Pro 14" (1512px), 💻 Surface Laptop (1504px), 💻 ThinkPad 14" (1366px) | 4 |
| 2xl | 1536–2560+px | 🖥️ 1080p Monitor (1920px), 🖥️ 1440p Monitor (2560px) | 2 |
Insights
✕5 devices fall into the uncovered range 0–639px: iPhone SE, iPhone 14, iPhone 14 Pro Max, Pixel 7, Galaxy S23. Consider adding a breakpoint below 640px.
⚠Only 13/19 (68%) of common devices are covered by your breakpoints. Consider adjusting your ranges.
⚠The '2xl' range spans 1024px (1536–2560+px). Wide ranges may need an intermediate breakpoint for better control.
Export
Why Responsive Breakpoints Matter
A breakpoint system is a promise you make to every user: "at this screen width, the layout will shift to serve you better." But the real-world device landscape makes that promise hard to keep. Today's phones range from 360px (Galaxy S23) to 430px (iPhone 14 Pro Max), and foldable screens like the Galaxy Z Fold open at 717px – a width that falls inside many frameworks' tablet tier but is used like a phone. Designing with just "mobile" and "desktop" in mind misses an entire spectrum of contexts.
Framework defaults are reasonable starting points, but they're not equally good for every product. Tailwind's md starts at 768px – comfortably covering iPads – while Bootstrap's sm starts at 576px, creating an explicit large-phone tier. Material Design 3 uses four semantic tiers (compact, medium, expanded, large) rather than arbitrary pixel values, which maps more directly to responsive design intent. Knowing what each system covers – and where the gaps are – lets you make an informed choice rather than cargo-culting a config.
Coverage gaps are silent bugs. If no breakpoint covers a specific width, your base (mobile-first) styles apply unchanged – which may be fine, or may mean a layout that was designed for 375px is stretched awkwardly to 600px before your md styles kick in. This tool surfaces those gaps immediately so you can decide whether to add a breakpoint, adjust an existing one, or accept the gap as intentional. Pair this with the Grid Calculator to see how column counts change across your breakpoints, and check accessibility implications of layouts at each tier.