cssresponsifmedia-queryPemula8 mnt baca

Media Query

Fondasi desain responsif: sintaks media query, breakpoint umum, dan pola max-width vs min-width.

Analogi: baju yang menyesuaikan badan

Bayangkan kamu punya satu baju ajaib yang otomatis mengecil saat dipakai anak kecil dan membesar saat dipakai orang dewasa. Media query adalah "baju ajaib" untuk website: CSS yang berubah mengikuti lebar layar perangkat. Tanpa media query, website desktop yang dibuka di HP akan terlihat kecil mungil dan harus di-zoom manual, pengalaman yang menyebalkan.

Kenapa media query ada?

Sejarahnya: dulu website hanya dibuka di komputer desktop dengan layar lebar. Lalu muncul smartphone, dan website desktop terlihat rusak di layar kecil: teks terlalu kecil, harus scroll horizontal, tombol susah dipencet. Solusinya bukan membuat dua website terpisah (mahal dan ribet dirawat), tapi satu website yang beradaptasi. Media query adalah alat utamanya: "kalau layarnya sekian, pakai aturan CSS yang ini".

Sintaks dasar

css

/* Aturan normal (desktop) */
.kartu {
  width: 300px;
}

/* Kalau lebar layar 600px atau kurang, timpa aturannya */
@media (max-width: 600px) {
  .kartu {
    width: 100%;
  }
}

Bacanya: "aplikasikan blok CSS ini hanya jika kondisi di dalam kurung terpenuhi". max-width: 600px berarti "lebar viewport maksimal 600px", alias layar kecil (HP).

Contoh bertahap: navigasi responsif

Contoh paling sederhana dulu, satu properti berubah:

css

/* Desktop: menu horizontal */
.menu {
  display: flex;
  gap: 24px;
}

/* HP: menu vertikal */
@media (max-width: 600px) {
  .menu {
    flex-direction: column;
    gap: 8px;
  }
}

Lalu contoh yang lebih realistis: layout dua kolom jadi satu kolom.

css

.konten-utama {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .konten-utama {
    grid-template-columns: 1fr; /* tumpuk vertikal */
  }

  .sidebar {
    order: 2; /* opsional: pindah ke bawah */
  }
}

Breakpoint umum

Tidak ada angka sakti, tapi komunitas punya kesepakatan kasar:

css

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

/* HP besar / tablet kecil */
@media (max-width: 768px) { /* ... */ }

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

Pilih breakpoint berdasarkan kapan layout-mu rusak, bukan berdasarkan ukuran iPhone tertentu. Sempitkan browser perlahan; saat layout terlihat aneh, di situlah breakpoint-mu.

max-width vs min-width

Dua gaya penulisan:

css

/* Desktop-first: mulai dari besar, timpa untuk kecil */
.kotak { width: 800px; }
@media (max-width: 768px) { .kotak { width: 100%; } }

/* Mobile-first: mulai dari kecil, tambah untuk besar */
.kotak { width: 100%; }
@media (min-width: 769px) { .kotak { width: 800px; } }

Keduanya valid. Mobile-first (dibahas di modul tersendiri) kini lebih disarankan karena mayoritas pengguna internet memakai HP.

Kesalahan umum pemula

Salah: lupa viewport meta tag. Tanpa ini, HP menganggap layarmu 980px dan media query tidak jalan!

html

<!-- SALAH: tidak ada meta viewport -->
<head>
  <title>Situku</title>
</head>

html

<!-- BENAR -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Situku</title>
</head>

Salah: breakpoint terlalu banyak. Lima breakpoint untuk satu halaman sederhana = susah dirawat. Mulai dari satu (misal 768px), tambah hanya bila perlu.

Salah: menyembunyikan konten penting di mobile dengan display: none. Pengguna HP juga butuh konten itu; tata ulang, jangan hapus.

Catatan teknis: media query bisa memeriksa lebih dari lebar: orientation: portrait, prefers-color-scheme: dark, prefers-reduced-motion. Tapi 95% kasus cukup max-width/min-width.

Latihan kilat

Tulis media query: di bawah 640px, .grid yang semula 3 kolom menjadi 1 kolom.
Website-mu rusak di HP padahal media query sudah benar. Satu tag HTML apa yang kemungkinan lupa? Tulis tagnya.
Apa beda pendekatan max-width: 768px dan min-width: 769px? Mana yang sejalan dengan mobile-first?

Kunci: (1) @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }. (2) <meta name="viewport" content="width=device-width, initial-scale=1">. (3) max-width = desktop-first (kurangi dari besar), min-width = mobile-first (tambah dari kecil); mobile-first memakai min-width.

Rangkuman

Media query = CSS bersyarat berdasarkan karakteristik perangkat, terutama lebar layar. Ingat meta viewport, pilih breakpoint saat layout rusak, dan pertimbangkan mobile-first.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Rasakan Breakpoint

Media query adalah gerbang menuju desain responsif. Tanpa memahaminya, websitemu hanya bagus di satu ukuran layar.

Di playground:

Sempitkan preview melewati 600px dan amati perubahan kartu. Catat di komentar apa saja yang berubah.
Tambahkan breakpoint kedua di 400px: ubah padding menjadi 12px dan ukuran h2 menjadi 1.1rem.
Hapus meta viewport dari HTML (sementara), amati media query tidak jalan di mode mobile. Kembalikan dan jelaskan di komentar kenapa.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox