Design Atlas
한국어
▦ Layout

Breakpoints

브레이크포인트

The width thresholds at which a layout switches wholesale — the lines that divide mobile, tablet and desktop.

Also known as: Media query breakpointsResponsive breakpoints
···
html
<div class="device" id="device">
  <div class="topbar" id="topbar">
    <span class="logo"></span>
    <div class="menu" id="menu"></div>
  </div>
  <div class="grid" id="grid"></div>
</div>
<div class="label" id="label">Mobile · 375px</div>
css
.stage-wrap{}
.device{position:relative;width:70%;max-width:560px;border:2px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--surface);transition:width 2.6s cubic-bezier(.4,0,.2,1)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line)}
.logo{width:20px;height:20px;border-radius:5px;background:var(--accent)}
.menu{display:flex;gap:6px}
.menu i{width:22px;height:6px;border-radius:3px;background:var(--line)}
.grid{display:grid;grid-template-columns:1fr;gap:8px;padding:10px}
.grid b{height:26px;border-radius:6px;background:var(--bg);border:1px solid var(--line)}
.device.md .grid{grid-template-columns:1fr 1fr}
.device.lg .grid{grid-template-columns:1fr 1fr 1fr}
.device.lg .menu{gap:10px}
.label{margin-top:10px;text-align:center;font-size:11px;color:var(--muted);letter-spacing:.04em}
js
const device = document.getElementById('device');
const grid = document.getElementById('grid');
const menu = document.getElementById('menu');
const label = document.getElementById('label');
for (let i = 0; i < 6; i++) grid.appendChild(document.createElement('b'));
for (let i = 0; i < 3; i++) menu.appendChild(document.createElement('i'));
const steps = [
  { cls: '', width: '38%', text: 'Mobile · 375px' },
  { cls: 'md', width: '62%', text: 'Tablet · 768px' },
  { cls: 'lg', width: '92%', text: 'Desktop · 1280px' },
];
let i = 0;
function apply() {
  device.className = 'device ' + steps[i].cls;
  device.style.width = steps[i].width;
  label.textContent = steps[i].text;
  i = (i + 1) % steps.length;
}
apply();
setInterval(apply, 2000);

You define styles that only apply above (or below) a given width, e.g. @media (min-width: 768px) { … }. Common thresholds cluster around 640/768/1024/1280px — not numbers tied to specific device resolutions, but empirically the widths where content typically starts to feel cramped.

Current best practice is to pick breakpoints from where your own content starts looking bad, not from device categories (phone/tablet/desktop) — literally drag the browser window narrower until wrapping looks wrong, and put the breakpoint there.

Mobile-first is also the default approach: write base styles for narrow screens and widen with min-width queries, rather than starting wide and narrowing with max-width — it's easier to maintain.

When to use

Use it when the layout structure itself needs to change — column count, navigation style. When only one component needs to adapt to its own slot, container queries are the better tool.