📱 Responsive Breakpoint Calculator
Find which responsive breakpoint is active for any viewport width across popular CSS frameworks.
ACTIVE BREAKPOINT
lg
≥ 1024px
Tailwind Breakpoints
📊 Key Data Points
375px
iPhone SE viewport width — the minimum mobile target to support
768px
iPad portrait viewport — the classic mobile/tablet breakpoint in most frameworks
Tailwind sm: 640px
Tailwind first breakpoint — lower than Bootstrap 576px
Responsive Breakpoints Checker -- Complete USA Guide 2026
Responsive design works by applying different CSS at different viewport widths. But which breakpoints to use, whether to go mobile-first or desktop-first, and what the actual pixel values of common device viewports are — these are questions that come up every project.
This tool shows standard CSS breakpoint values from all major frameworks. Runs in your browser.
**Long-tail searches answered here:** common css breakpoints for mobile tablet desktop 2024, responsive design preview multiple screen sizes online, tailwind bootstrap breakpoint values reference free.
For sizing calculations, pair with CSS Unit Converter and Font Size Calculator.
🔬 How This Calculator Works
Shows the standard breakpoint values from major CSS frameworks: Tailwind CSS (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px), Bootstrap (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px), and common device viewport widths for reference.
Mobile-first breakpoints use min-width media queries — styles apply from the breakpoint up. Desktop-first uses max-width — styles apply from the breakpoint down.
✅ What You Can Calculate
Framework breakpoint reference
Tailwind, Bootstrap, and Material UI breakpoint values in one place. No more googling tailwind sm breakpoint.
Mobile-first vs desktop-first
Shows both min-width (mobile-first) and max-width (desktop-first) media query syntax for the same breakpoints. Helps understand which direction your CSS framework uses.
Common device viewports
iPhone SE (375px), iPhone 14 (390px), iPad (768px), iPad Pro (1024px), MacBook (1280px), Full HD (1920px) — actual viewport widths for common devices.
Breakpoint range visualization
Shows the pixel range each breakpoint covers: Tailwind md covers 768px to 1023px. Visualizing ranges prevents gap bugs where no breakpoint applies.
🎯 Real Scenarios & Use Cases
Starting a new responsive design
Before writing media queries, review the standard breakpoint options here and pick the set that matches your expected device distribution.
Debugging responsive layout gaps
Your layout breaks at 900px but your breakpoints are 768px and 1024px. Check the ranges here — 900px falls in the gap between breakpoints.
Cross-framework project
You are using a Tailwind utility class alongside a Bootstrap component. Their breakpoints overlap in some cases but not others.
Mobile viewport planning
Reference the actual viewport widths of target devices before designing. An iPhone SE viewport is 375px — narrower than many designers assume.
💡 Pro Tips for Accurate Results
Mobile-first is better for performance. Base CSS applies to all screens; more is added at larger breakpoints. Desktop-first applies heavy styles by default and overrides for mobile — larger CSS on mobile.
Content breakpoints over device breakpoints. Add breakpoints where your content breaks — not at specific device sizes. Device-specific values become outdated as devices change.
Three to five breakpoints cover 95% of real devices. More breakpoints create more maintenance burden without proportional benefit.
Container queries for reusable components. CSS @container applies styles based on the container size, not the viewport. Better for components that appear in different layout contexts.
🔗 Use These Together
🏁 Bottom Line
Standard breakpoints ensure consistency and avoid the maintenance cost of custom values. For responsive CSS: CSS Unit Converter for unit conversions, Font Size Calculator for fluid typography.
What are the standard CSS breakpoints in major frameworks?
Tailwind CSS (v3): sm=640px, md=768px, lg=1024px, xl=1280px, 2xl=1536px. Bootstrap 5: xs<576px, sm>=576px, md>=768px, lg>=992px, xl>=1200px, xxl>=1400px. Material UI v5: xs=0px, sm=600px, md=900px, lg=1200px, xl=1536px. Chakra UI: sm=480px, md=768px, lg=992px, xl=1280px, 2xl=1536px. These are mobile-first (min-width) breakpoints — styles apply from the breakpoint and up, overriding smaller breakpoint styles.
Should I use px or rem for media queries?
Use rem. Browser zoom (Ctrl+) scales rendered content but media queries in px do not respond to the user's base font size preference. rem-based breakpoints react to font preferences: if the user sets 20px base font, an 48rem breakpoint triggers at 960px instead of 768px, giving a wider layout to users who need larger text. This is the correct accessible behavior. Convert px breakpoints to rem by dividing by 16: 768px = 48rem.
What is mobile-first vs desktop-first media query approach?
Mobile-first: write base styles for mobile, use min-width media queries to add styles for larger screens. @media (min-width: 768px) { ... }. This is the modern standard — mobile styles are simpler and load first; larger-screen styles are additive. Desktop-first: write base styles for desktop, use max-width media queries to adapt for smaller screens. @media (max-width: 767px) { ... }. This was the older approach and leads to more CSS being downloaded on mobile than needed. Tailwind, Bootstrap, and Material UI all use mobile-first.
What is the difference between layout breakpoints and component breakpoints?
Layout breakpoints change the macro page structure (sidebar collapses, grid columns change). Component breakpoints change a single component regardless of its container context. Container queries (@container) solve the component breakpoint problem: a card can respond to its container width rather than the viewport. @container (min-width: 400px) { .card { ... } }. Browser support: all major browsers as of 2023. Use layout breakpoints for page structure, container queries for component-level responsiveness.
How do I choose breakpoints for my specific design?
Content-driven breakpoints: design the layout for mobile, then widen the viewport until the layout breaks — add a breakpoint there. Repeat. This produces breakpoints at exactly where they are needed, not arbitrary framework defaults. Common heuristic: one breakpoint at 768px (tablet portrait) and one at 1024px (desktop) covers most designs with three distinct layouts. For complex apps: add 480px (large phone landscape), 1280px (large desktop), and 1536px (ultrawide). Avoid breakpoints every 50px — each adds maintenance burden.
What are common breakpoint patterns for specific UI components?
Navigation: stack vertically on mobile (<768px), horizontal on tablet+. Sidebar: hidden/drawer on mobile, visible inline on desktop (>1024px). Cards grid: 1 column on mobile, 2 on tablet, 3-4 on desktop. Images: full-width on mobile, float with text on desktop. Forms: single column on mobile, two-column on desktop for wider forms. Tables: horizontal scroll on mobile, fixed columns on desktop. Modal: full-screen on mobile, centered fixed-size on desktop.
What other CSS layout tools are on this site?
The Flexbox Generator and Grid Generator build responsive layouts for these breakpoints. The px to REM Converter converts breakpoint values to rem. The CSS Unit Converter handles all CSS unit conversions. The Font Size Calculator creates fluid type that scales between breakpoints using CSS clamp(). The CSS Media Query documentation helps understand all media features beyond just width. All are in the Dev Tools CSS section.