MoreLesson 273Free preview

Typical Device Breakpoints

This lesson is part of How To · All levels

Summary

Breakpoint is a specific screen width where the layout changes, for example from one column to two columns. The mobile-first approach uses min-width to make the basic style applicable to smaller screens, then added to larger screens. Figures like 768px or 1024px are just the starting point; the best breakpoints are determined by the content needs.

Key points

Mobile-first uses a minimum-width and basic style media query for small screens.
Max-width is used when you want to tap into a style on a narrower screen.
Breakpoints should be chosen when content starts to appear cramped, rather than chasing the device's name.
Test the layout at real size as the width of the device changes constantly.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.