Baricode LMS - Media Query

Media Query 📱

Media query adalah fitur CSS yang memungkinkan kita menerapkan gaya berbeda berdasarkan karakteristik perangkat — terutama lebar layar. Inilah fondasi dari Responsive Web Design.

Sintaks Dasar Media Query

@media (kondisi) {
  /* CSS yang hanya berlaku jika kondisi terpenuhi */
  selektor {
    properti: nilai;
  }
}

Contoh paling sederhana:

/* Teks merah di semua layar */
p {
  color: red;
}

/* Teks biru hanya di layar <= 768px */
@media (max-width: 768px) {
  p {
    color: blue;
  }
}

max-width vs min-width

max-width — gaya berlaku saat layar lebih kecil atau sama dengan nilai yang ditentukan:

/* Berlaku di layar hingga 768px lebar (mobile & tablet kecil) */
@media (max-width: 768px) {
  .kontainer { padding: 16px; }
  .kolom { width: 100%; } /* satu kolom di mobile */
}

min-width — gaya berlaku saat layar lebih besar atau sama dengan nilai yang ditentukan:

/* Berlaku di layar mulai 1024px ke atas (desktop) */
@media (min-width: 1024px) {
  .kontainer { max-width: 1280px; margin: 0 auto; }
  .kolom { width: 33.333%; }
}

Breakpoint Umum

Breakpoint adalah titik lebar layar di mana layout berubah:

/* Mobile kecil */
@media (max-width: 480px)  { ... }

/* Tablet */
@media (max-width: 768px)  { ... }

/* Laptop kecil */
@media (max-width: 1024px) { ... }

/* Desktop */
@media (max-width: 1280px) { ... }

/* Desktop besar */
@media (min-width: 1536px) { ... }

Mobile First vs Desktop First

Ada dua pendekatan dalam menulis responsive CSS:

Desktop First (gunakan max-width):

/* CSS desktop ditulis dulu */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Lalu override untuk layar lebih kecil */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr; /* satu kolom di mobile */
  }
}

Mobile First (gunakan min-width) — direkomendasikan:

/* CSS mobile ditulis dulu */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* satu kolom di mobile */
}

/* Lalu tambah untuk layar lebih besar */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* dua kolom di tablet */
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* tiga kolom di desktop */
  }
}

Contoh Responsive Navbar

/* Mobile: hamburger menu, navigasi tersembunyi */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.nav-menu {
  display: none; /* tersembunyi di mobile */
  flex-direction: column;
}

.hamburger {
  display: block;
}

/* Desktop: menu tampil horizontal, hamburger disembunyikan */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;
    flex-direction: row;
    gap: 24px;
  }

  .hamburger {
    display: none;
  }
}

Menggabungkan Kondisi

/* Tablet saja: antara 480px dan 1024px */
@media (min-width: 480px) and (max-width: 1024px) {
  .elemen { font-size: 18px; }
}

/* Mobile ATAU desktop besar */
@media (max-width: 480px), (min-width: 1440px) {
  .elemen { padding: 32px; }
}

Media Query untuk Orientasi

/* Layar landscape (lebar > tinggi) */
@media (orientation: landscape) {
  .video { height: 80vh; }
}

/* Layar portrait (tinggi > lebar) */
@media (orientation: portrait) {
  .gambar { width: 100%; }
}

Viewport Meta Tag — Wajib Ada!

Agar media query bekerja di perangkat mobile, wajib tambahkan meta viewport di <head> HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tanpa ini, browser mobile akan menganggap lebar halaman adalah 980px (seperti desktop) dan media query tidak akan bekerja sebagaimana mestinya.

Ringkasan Pola Responsive yang Umum

/* Gambar selalu responsif */
img {
  max-width: 100%;
  height: auto;
}

/* Container responsif */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Font responsif */
h1 {
  font-size: 1.8rem;
}
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
  h1 { font-size: 3.5rem; }
}

💡 Tips: Selalu mulai dengan pendekatan Mobile First — desain untuk layar kecil terlebih dahulu, lalu tambahkan kompleksitas untuk layar besar. Ini tidak hanya lebih mudah secara CSS, tapi juga lebih baik untuk performa karena mobile biasanya memiliki koneksi yang lebih lambat. 📱

Media Query