CSS media query breakpoints are the screen widths where your layout changes. Pick them well and your site looks good on phones, tablets and desktops. This guide lists common breakpoint values, explains mobile-first vs desktop-first, and gives examples you can copy.
What is a breakpoint?
A breakpoint is a viewport width at which a media query kicks in and your CSS changes. For example, a three-column grid might become one column below 600px.
@media (max-width: 599px) {
.grid { grid-template-columns: 1fr; }
}Common breakpoint values
There is no universal standard. These are widely used starting points:
| Device group | Typical width |
|---|---|
| Small phones | up to 480px |
| Phones | up to about 600px |
| Tablets | about 600px to 991px |
| Laptops and small desktops | about 992px to 1199px |
| Large desktops | 1200px and up |
Values used by popular frameworks
- Bootstrap 5: 576px, 768px, 992px, 1200px and 1400px.
- Tailwind CSS: 640px, 768px, 1024px, 1280px and 1536px.
Mobile-first vs desktop-first
Mobile-first
Write base styles for small screens and add min-width queries as the screen grows.
.card { padding: 1rem; }
@media (min-width: 768px) {
.card { padding: 2rem; }
}This is the usual recommendation: phones get the simplest CSS, and larger screens add enhancements.
Desktop-first
Write base styles for large screens and use max-width queries to adapt downward.
.card { padding: 2rem; }
@media (max-width: 767px) {
.card { padding: 1rem; }
}For example, this works well when you are adapting an existing desktop design.
Don’t design around devices, design around content
New phones and tablets appear constantly, so exact device sizes go out of date. A better method: shrink your browser window and add a breakpoint where the layout starts to look wrong, such as text lines getting too long or columns getting cramped.
Copy-paste examples
A simple three-tier setup
/* Base: mobile */
.container { padding: 1rem; }
/* Tablet and up */
@media (min-width: 600px) {
.container { padding: 1.5rem; }
}
/* Desktop and up */
@media (min-width: 992px) {
.container { max-width: 1100px; margin: 0 auto; }
}Hide something on mobile
@media (max-width: 599px) {
.desktop-only { display: none; }
}Target landscape orientation
@media (orientation: landscape) and (max-height: 500px) {
.hero { min-height: auto; }
}Best practices
- Use as few breakpoints as you can get away with. Three is usually enough.
- Use
remoremvalues if you want breakpoints to respect user font-size settings. - Keep media queries near the rules they change, or grouped consistently at the end.
- Prefer flexible layouts (flexbox, grid,
clamp()) so fewer breakpoints are needed. - Test on real devices, not only in the browser’s responsive mode.
CSS media query breakpoints FAQ
What breakpoints should I use?
A common trio is around 600px (phone to tablet), 992px (tablet to desktop) and 1200px (large desktop). Adjust to where your own design breaks.
Do I need the viewport meta tag?
Yes. Without <meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers won’t apply your breakpoints as expected.
What are container queries?
Container queries let a component respond to the size of its container instead of the whole screen, which is useful for reusable components. As a result, they complement media queries rather than replace them.