There is no magic list of breakpoints. Your content decides.
Direct answer
A breakpoint is a screen width at which your layout changes. Common starting points are about 480, 768, 1024 and 1280 pixels, but the best breakpoints are where your design starts to look bad. Resize the browser, find where it breaks and add a breakpoint there.
A simple set
/* base: phones */
@media (min-width: 640px) { /* large phones, small tablets */ }
@media (min-width: 900px) { /* tablets and small laptops */ }
@media (min-width: 1200px) { /* desktops */ }
How to find yours
- Open DevTools and switch to responsive mode.
- Drag the width slowly.
- Note where text lines get too long, columns squeeze or things overlap.
- Add a query there.
Tips
- Use fewer breakpoints with flexible units (
%,fr,clamp()). - Test real devices when you can.
- Name breakpoints with CSS variables or a comment legend.
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Let the content set the breakpoints.
