Responsive Design

Responsive Design adalah pendekatan desain web yang memastikan halaman terlihat dan berfungsi baik di semua ukuran layar — dari ponsel kecil sampai monitor besar. Teknik utama: CSS Media Queries (menerapkan style berbeda berdasarkan ukuran viewport), Flexible Grid (layout yang menyesuaikan, bukan fixed width), Flexible Images (gambar yang tidak melebihi container width), dan Mobile-First (desain untuk mobile dulu, lalu tambah fitur untuk layar lebih besar). Breakpoint umum: sm (640px), md (768px), lg (1024px), xl (1280px). Container Queries (CSS baru) memungkinkan styling berdasarkan ukuran container, bukan viewport. Testing responsive: Chrome DevTools Device Mode, BrowserStack, testing di device nyata.

Contoh Kode

/* Responsive dengan Media Queries */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

/* Tailwind approach */
// className="p-4 md:p-8 lg:px-12 max-w-full md:max-w-3xl lg:max-w-5xl mx-auto"