Breakpoints
Learn common breakpoint values and selection criteria.
What is a breakpoint?
A breakpoint is a screen width where styles change. When you write @media (min-width: 768px), 768px is a breakpoint: styles change at that width.
Common breakpoints often follow device classes: ~576px (phone), ~768px (tablet), ~1024px (small desktop), ~1280px (wide desktop). They can shift based on your content, though.
The mobile-first approach
Mobile-first means writing base styles for phones first, then adding new @media blocks with min-width for wider screens.
The upside: phone styles stay minimal, and you add more as the screen widens. CSS typically uses min-width.
body { font-size: 16px; }
@media (min-width: 768px) {
body { font-size: 18px; }
}The desktop-first approach
Desktop-first is the reverse: you write styles for desktops first, then add new @media blocks with max-width for narrower screens. Desktop styles are the base; phone styles are layered on top.
This approach was common in older code. It is not recommended today; phone traffic is now the majority, and starting with minimal phone styles is more efficient. Writing mobile-first prioritizes the phone.
Exercise Mobile-first: two columns above 768px
Turn the .cards container — single column on phones — into two columns at 768px and above. Add an @media (min-width: 768px) block with a .cards selector and a grid-template-columns: 1fr 1fr declaration.
Show example solution
.cards {
display: grid;
grid-template-columns: 1fr;
}
/* Two columns at 768px and above */
@media (min-width: 768px) {
.cards {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Test yourself
-
Which is a common tablet breakpoint?
- 768px
- 120px
- 4000px
- 12px
Show answer
768px — Correct. 768px is a common tablet breakpoint; many frameworks use this value.
-
Complete the mobile-first @media block
body { font-size: 16px; } @media (____: 768px) { body { font-size: 18px; } }Show answer
body { font-size: 16px; } @media (min-width: 768px) { body { font-size: 18px; } } -
Match the approaches
- Mobile-first
- min-width
- Desktop-first
- max-width
- Mobile-first advantage
- Minimal phone styles
- Desktop-first advantage
- Legacy code compatibility