| Framework | Name | Min Width | Max Width | Media Query |
|---|
CSS Breakpoints Reference lists the standard responsive design breakpoints for major CSS frameworks and device categories: mobile (320-480px), tablet (481-768px), small laptop (769-1024px), desktop (1025-1200px), and large screen (1200px+). It shows both the pixel values and the corresponding min-width / max-width media query syntax, with real-world device examples for each tier.
Responsive breakpoints are the screen widths at which a layout changes to accommodate different viewport sizes. CSS media queries trigger these layout changes: @media (min-width: 768px) { ... }. Mobile-first design starts with styles for small screens and adds complexity with min-width queries. Desktop-first (legacy) starts wide and uses max-width queries to simplify for smaller screens. Modern practice is mobile-first.
Framework breakpoints differ slightly: Bootstrap uses 576px (sm), 768px (md), 992px (lg), 1200px (xl), 1400px (xxl). Tailwind CSS uses 640px (sm), 768px (md), 1024px (lg), 1280px (xl), 1536px (2xl). These are starting points — real projects often use custom breakpoints based on content, not device sizes. 'Breakpoints should be determined by content, not by device' is a modern best practice.
Bootstrap grid breakpoints
Result: xs: <576px / sm: ≥576px / md: ≥768px / lg: ≥992px / xl: ≥1200px / xxl: ≥1400px
Tailwind responsive prefixes
Result: sm:768px / md:768px / lg:1024px / xl:1280px / 2xl:1536px (all are min-width)
Common custom breakpoint
Result: @media (min-width: 960px) { /* content-driven custom breakpoint */ }
Should breakpoints be device-specific or content-driven?
Modern best practice: content-driven. Add breakpoints where your content breaks — where text becomes too wide to read, where a sidebar needs to collapse, where cards wrap awkwardly. Designing for specific devices (320px for iPhone 5, 768px for iPad) becomes an endless maintenance task as device sizes proliferate. Use device sizes as starting points, then adjust for your content.
What is the difference between min-width and max-width in media queries?
min-width is used in mobile-first design — the base styles apply to all screens, and min-width queries add styles for larger screens. max-width is used in desktop-first design — the base styles apply to all screens, and max-width queries override for smaller screens. Mobile-first is preferred because it's more performant (fewer bytes for mobile) and forces simpler base styles.
What are container queries and how are they different from media queries?
Media queries respond to the viewport (browser window) size. Container queries (@container) respond to the size of a specific parent element. This enables components that adapt based on their container's size rather than the viewport — useful for reusable components that appear in different layouts. Container queries are supported in all modern browsers as of 2023.
How many breakpoints should a project have?
As few as needed. Most projects work well with 2-4 breakpoints. More breakpoints mean more CSS to maintain and more edge cases to test. Start with one breakpoint (mobile vs desktop), add intermediate ones only when content genuinely needs them. Avoid breakpoints in the 400-500px range where few real devices land.
What is the ideal line width for readability?
45-75 characters per line is the typographic ideal for body text. At 16px font and ~8px per character, this is 360-600px of text column. A max-width: 65ch on body text columns is a practical implementation. This is why full-width text on large monitors looks bad — the lines are too long to track between lines comfortably.