Breakpoints are screen widths where your website layout changes.
They help you design different layouts for mobile, tablet, and desktop devices.
Instead of guessing, developers use common breakpoints based on real device sizes.
Each media query represents a breakpoint.
As the screen gets smaller, new styles are applied automatically.
This layout changes from three columns to two columns and then to one column.
This is a real-world example of responsive breakpoints in action.
On smaller screens, the menu is hidden.
This is the first step toward creating mobile menus like hamburger navigation.
Common breakpoint ranges
- Mobile phones up to 600px
- Tablets from 601px to 900px
- Small laptops from 901px to 1200px
- Large screens above 1200px
Breakpoints are also used to adjust font sizes for better readability.
Practice task
Create a layout and:
- Add at least two breakpoints
- Change columns at each breakpoint
- Change text size
- Test on different screen widths
Next lesson
In the next page, you will learn responsive grid and layout techniques.