Spear — Learn to Code

Docs/CSS/Responsive Design

Responsive Design

Responsive design memastikan website tampil baik di semua layar.

Breakpoints Umum

max-width: 640px — mobile
max-width: 768px — tablet
max-width: 1024px — laptop

Tips

Gunakan max-width bukan fixed width
Gunakan unit relatif (%, rem, vw)
Mobile-first approach (min-width)

style.css

Try It →

.resp-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.resp-item {
  padding:16px;
  background:#F1F5F9;
  border-radius:8px;
  text-align:center;
  font-weight:bold;
}
  @media (max-width:400px) {.resp-grid {
  grid-template-columns:1fr;
} }

← Previous

Animations

Variables