📛 Responsive Design

Panduan lengkap CSS Media Queries untuk desain web responsif

📌 Elements

💡 Media Query Fundamentals

Media Queries memungkinkan Anda menerapkan CSS berbeda berdasarkan karakteristik perangkat seperti lebar layar, orientasi, dan resolusi.

responsive.css
/* Breakpoint dasar */
@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

/* Range lebar layar */
@media (min-width: 576px) and (max-width: 992px) {
  .card {
    width: 50%;
  }
}

/* Orientasi perangkat */
@media (orientation: portrait) {
  .header {
    height: auto;
  }
}

📝 Penjelasan Detail:

â€ĸ @media - Aturan untuk menentukan media queries
â€ĸ max-width - Maksimum lebar viewport
â€ĸ min-width - Minimum lebar viewport
â€ĸ orientation - Portrait atau landscape
â€ĸ and - Kombinasi multiple conditions

🛠ī¸ Features

advanced-responsive.css
/* Mobile-first approach */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Media query untuk print */
@media print {
  .navbar {
    display: none;
  }
}

/* Media feature untuk dark mode */
@media (prefers-color-scheme: dark) {
  --bg-color: #222;
  --text-color: #fff;
}

ℹī¸ Browser Support

Media Queries didukung di semua browser modern (Chrome 29+, Firefox 23+, Safari 9+, Edge 12+). Fitur prefers-color-scheme didukung Chrome 76+, Firefox 67+, Safari 12.1+.

📊 Basic Tables

media-query-values.css
/* Common Breakpoints (px) */
Mobile       /* <576px */
Tablet       /* 576-992 */
Desktop     /* 992-1200 */
Large Desktop /* >1200 */

/* Media Features */
width, height   /* Dimensi viewport */
aspect-ratio  /* Rasio width/height */
orientation  /* Portrait/landscape */
resolution   /* Kepadatan piksel */
hover        /* Dukungan hover */

📝 Penjelasan Detail:

â€ĸ Breakpoints umum - Mobile (540px), Tablet (720px), Desktop (960px)
â€ĸ Pixel ratio - Untuk layar retina (@2x, @3x)
â€ĸ prefers-reduced-motion - Untuk pengguna yang sensitif terhadap animasi
â€ĸ hover/pointer - Deteksi jenis perangkat input
â€ĸ Gunakan unit relatif (em, rem, %) daripada piksel absolut

🚀 Advanced Table

advanced-responsive.css
/* CSS Grid dengan media queries */
@media (min-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Media query bersarang */
@supports (display: grid) {
  @media (min-width: 1024px) {
    main {
      display: grid;
      grid-template-columns: 1fr 3fr;
    }
  }
}

/* Media query untuk JavaScript */
const mq = window.matchMedia('(min-width: 768px)');
if (mq.matches) { console.log('Desktop view') };

ℹī¸ Browser Support

Grid dengan media queries didukung di semua browser modern. Fitur matchMedia() didukung di Chrome 9+, Firefox 6+, Safari 5.1+, Edge 12+.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan pendekatan mobile-first dan media queries untuk membangun pengalaman yang responsif.

best-practices.css
/* ✅ Good - Mobile first approach */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* ❌ Avoid - Desktop first */
.container {
  padding: 2rem;
}

@media (max-width: 767px) {
  .container {
    padding: 1rem;
  }
}

/* ✅ Good - Logical breakpoints */
@media (min-width: 40em) {
  .content {
    max-width: 75ch;
  }
}

📝 Penjelasan Detail:

â€ĸ Mobile-first - Mulai dari small screens baru ke larger screens
â€ĸ Gunakan em/rem - Lebih aksesibel daripada px untuk breakpoints
â€ĸ Minimal breakpoints - Gunakan hanya saat diperlukan
â€ĸ Content-based breakpoints - Sesuaikan dengan konten bukan perangkat
â€ĸ Test berbagai perangkat - Jangan hanya bergantung pada ukuran viewport