How many breakpoints should I use?

3-5 for most sites. Only add breakpoints where your layout genuinely needs to change. Unnecessary breakpoints add complexity without benefit.

min-width or max-width?

min-width (mobile-first) is recommended. Start with mobile styles, add complexity for larger screens. It produces cleaner, more maintainable CSS.

Should I use px or em for breakpoints?

Both work. px is more predictable and widely used. em respects user font-size preferences, which can improve accessibility. Most frameworks use px.

What about landscape mobile?

Landscape phones are typically 640-900px wide, overlapping with tablets. Design your tablet layout to work at these widths rather than adding a separate landscape breakpoint.

Responsive Breakpoints: A Practical Guide (2026)

📱

Try Breakpoint Previewer

Free, no signup →