브레이크포인트

<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>

.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}

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);