A breakpoint is the width at which your layout changes – a single column becomes two, a menu turns into a hamburger button, the font size steps up. Every responsive site has them. The question beginners always ask is: “Which pixel values should I use?” The honest answer is that the best breakpoints come from your content, not from a list of phone models. This guide to responsive design breakpoints shows how to choose them and how to write them cleanly.
If media queries are new to you, read the CSS Responsive Design lesson first.
First, the viewport meta tag
Without this line in the <head>, mobile browsers pretend the screen is about 980px wide and zoom out, so none of your breakpoints work as expected:
<meta name="viewport" content="width=device-width, initial-scale=1">Do not add maximum-scale=1 or user-scalable=no. Blocking zoom hurts people with low vision. See HTML Head, Meta and SEO for the other head tags.
Why “device breakpoints” are a trap
It is tempting to write a query for every popular device. But there are hundreds of screen widths in use, phones get new sizes every year, and people use split-screen on tablets and resize browser windows on laptops. A layout tuned to five specific devices often breaks at the widths in between.
Instead, design for a range of widths and add a breakpoint only where the layout starts to look wrong. This is called a content-based breakpoint.
How to find content-based breakpoints
- Build the layout for a narrow screen first (around 320–360px). One column, comfortable text, large tap targets.
- Open the page in browser DevTools responsive mode and slowly drag the width wider.
- Watch for the moment something looks bad: lines of text become too long (more than roughly 70–80 characters), cards become huge, or there is a big empty gap.
- Note that width. That is a breakpoint. Add a media query there and change the layout.
- Keep dragging and repeat. Most sites need only two to four major breakpoints.
Tip: Round your breakpoints to friendly numbers and write them in em or rem if you like – for example 48em (768px at the default 16px font size). Using em-based media queries means the layout also responds when a user increases the browser’s default font size.
Common responsive design breakpoints to start with
You still need somewhere to start, especially in a team. These ranges are widely used and match popular frameworks closely. Treat them as defaults you adjust, not rules.
| Name | Min width | Typical layout |
|---|---|---|
| Base (no query) | 0 | Single column, stacked navigation |
| Small | 576px | Larger phones in landscape; two small columns possible |
| Medium | 768px | Tablets; two columns, sidebar may appear |
| Large | 992px | Small laptops; full navigation bar, three columns |
| Extra large | 1200px | Desktops; wider container, four columns |
| XXL | 1400px | Large monitors; cap the content width |
These are the same breakpoints Bootstrap 5 uses, which is handy if you work on Bootstrap projects – see Bootstrap 5 Grid Explained.
Mobile-first media queries
Write your base CSS for small screens and add min-width queries to enhance the layout as space grows. This keeps the mobile CSS simple, and small screens do not have to override desktop rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobile-first breakpoints</title>
<style>
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 16px; background: #fafaf7; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 99px; background: #222; color: #fff; font-size: 0.8rem; }
.badge::after { content: "Base: 1 column"; }
.cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
@media (min-width: 36em) { /* 576px */
.cards { grid-template-columns: repeat(2, 1fr); }
.badge::after { content: "Small: 2 columns"; }
}
@media (min-width: 62em) { /* 992px */
.cards { grid-template-columns: repeat(4, 1fr); }
.badge::after { content: "Large: 4 columns"; }
}
</style>
</head>
<body>
<span class="badge"></span>
<div class="cards">
<div class="card">Idli and chutney</div>
<div class="card">Masala dosa</div>
<div class="card">Pongal</div>
<div class="card">Filter coffee</div>
</div>
</body>
</html>Resize the preview: the badge tells you which rule is active. Notice there is no rule for “phone” – phones get the base styles automatically.
Keep breakpoints in one place
One small surprise for beginners: you cannot use a CSS custom property inside a media query condition. @media (min-width: var(--md)) does not work, because media queries are evaluated before custom properties are resolved on elements. So how do teams keep breakpoints consistent?
- Write the agreed values in a short comment at the top of the main stylesheet and stick to them.
- If you use a preprocessor such as Sass, store them in variables or a map and use a mixin.
- Group each component’s media queries next to its base styles, so you can see the full behaviour of a component in one place.
Whatever system you choose, the goal is that a new developer can find every breakpoint quickly and does not invent a sixth one at 850px.
Container queries: breakpoints for components
Media queries look at the whole viewport. But a card component may sit in a narrow sidebar on one page and a wide main area on another. Container queries let the component respond to the width of its own container instead. They are supported in all current major browsers.
.card-wrap {
container-type: inline-size;
}
.card {
display: grid;
gap: 1rem;
}
@container (min-width: 400px) {
.card {
grid-template-columns: 120px 1fr; /* image beside text */
}
}A good rule: use media queries for page-level layout (navigation, columns of the page) and container queries for reusable components (cards, widgets, form groups).
You may need fewer breakpoints than you think
Modern CSS can adapt without any query at all:
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))changes the number of columns automatically.flex-wrap: wraplets items flow onto new lines.clamp()creates fluid type and spacing, for examplefont-size: clamp(1.5rem, 1rem + 2vw, 2.5rem).max-widthon text containers (around65ch) keeps lines readable at any width.img { max-width: 100%; height: auto; }stops images overflowing.
Learn more about these units in px vs rem vs em vs vw and CSS Units.
Beyond width: other useful media features
| Media feature | Use it for |
|---|---|
(hover: hover) and (pointer: fine) | Only show hover effects on devices with a mouse |
(prefers-reduced-motion: reduce) | Turn off large animations for users who ask for less motion |
(prefers-color-scheme: dark) | Dark mode – see Dark Mode Design and CSS |
(orientation: landscape) | Rarely needed; prefer width-based queries |
print | Hide navigation and ads when someone prints an article |
Designing breakpoints in Figma
Designers do not need a frame for every width. A practical set is a mobile frame (360px), a tablet frame (768px) and a desktop frame (1280 or 1440px), built with Auto layout so you can drag the frame edges and check how content reflows. Write down how each component should behave between frames – for example “cards: 1 column below 576px, 2 up to 992px, then 4”. That note saves developers from guessing. See Figma Auto Layout Guide.
Testing your responsive design breakpoints
- Drag the width slowly from 320px to 1600px – do not only check preset devices.
- Test on at least one real Android phone; many Indian users browse on mid-range Android devices.
- Zoom the browser to 200% – content should still be usable without horizontal scrolling.
- Check landscape on a phone, where height is very small.
- Check long words and long names, such as an email address or a long town name, at narrow widths.
- Tab through the page with a keyboard at mobile width to check the menu.
Watch out: Avoid mixing min-width and max-width queries randomly in one stylesheet. Overlapping ranges create bugs at exactly one pixel, such as 768px, where both or neither rule applies. Choose mobile-first and stay consistent.
Frequently asked questions
What are the standard responsive breakpoints?
There is no official standard. Many teams start with 576px, 768px, 992px, 1200px and 1400px (the Bootstrap 5 values) and then adjust based on where their content actually breaks.
Should I use px or em in media queries?
Both work. Em-based queries respect the user’s browser font-size setting, so the layout changes when someone uses larger text. Whatever you choose, use it consistently.
Mobile-first or desktop-first?
Mobile-first is the common recommendation. Base styles serve small screens, min-width queries add complexity for larger ones, and the CSS usually ends up shorter.
Are container queries ready to use?
Yes. Size container queries are supported in all current major browsers. Use them for reusable components, and keep media queries for page-level layout.
How many breakpoints should a website have?
Most sites work well with two to four major breakpoints plus small tweaks. If you have ten, your layout probably relies too much on fixed widths.
