Media Query Adalah: Cara Membuat Website Responsive di CSS (Panduan Pemula)

Media query adalah aturan di CSS yang membuat tampilan website berubah menyesuaikan kondisi perangkat, paling sering berdasarkan lebar layar. Dengan media query, satu halaman yang sama bisa tampil sebagai layout satu kolom yang rapi di layar HP, lalu otomatis berubah jadi tiga kolom yang lega di layar laptop, tanpa kamu perlu membuat dua website terpisah. Inilah teknologi inti di balik istilah yang sering kamu dengar: responsive web design, desain web yang “menyesuaikan diri”.

Bayangkan kamu punya toko yang dindingnya bisa memanjang dan memendek sendiri mengikuti jumlah pengunjung. Sepi, dindingnya merapat jadi ruang kecil yang nyaman. Ramai, dindingnya melebar menampung semua orang. Media query memberi kemampuan seperti itu ke website-mu: kamu menulis aturan “kalau layarnya minimal selebar X, susun elemennya begini”, dan browser mengurus sisanya. Di panduan ini kamu akan memahami media query benar-benar dari nol, mulai dari sintaks @media, arti breakpoint, pendekatan mobile-first yang jadi standar industri, sampai contoh kode yang bisa langsung kamu coba.

Media Query Adalah… (Pengertian dan Kenapa Penting)

Media query adalah fitur CSS yang memungkinkan kamu menerapkan sekumpulan aturan style hanya ketika kondisi tertentu terpenuhi, misalnya “hanya berlaku kalau lebar layar minimal 768px”. Kata query di sini berarti “pertanyaan”: CSS seolah bertanya ke browser, “Apakah layar saat ini memenuhi syarat ini?” Kalau jawabannya ya, aturan di dalamnya dijalankan. Kalau tidak, aturan itu diabaikan.

Kenapa ini penting? Karena pengunjung website datang dari layar dengan ukuran yang sangat beragam, dari HP selebar 360px, tablet 800px, sampai monitor 1920px. Tanpa media query, sebuah layout tiga kolom yang cantik di laptop akan menjadi kolom-kolom sempit yang tidak terbaca di HP. Data lalu lintas internet Indonesia bahkan menunjukkan mayoritas pengguna mengakses web lewat HP, jadi tampilan mobile bukan lagi pilihan, ia keharusan.

Bentuk paling dasar media query terlihat seperti ini:

/* Aturan ini HANYA berlaku kalau lebar layar minimal 768px */
@media (min-width: 768px) {
  .kontainer {
    display: flex; /* berjajar horizontal di layar lebar */
  }
}

Bacanya: “Untuk layar dengan lebar minimal 768px, buat .kontainer menjadi flex.” Di layar yang lebih sempit dari 768px, blok di dalam kurung kurawal itu tidak berlaku sama sekali, seakan-akan tidak ditulis. Konsep “aturan yang menyala dan mati tergantung ukuran layar” ini dibahas langkah demi langkah dengan editor langsung di browser pada lesson media queries di Hyper Sheets, kamu ubah breakpoint-nya, previewnya berubah saat itu juga.

Anatomi Sintaks @media: Membedah Setiap Bagiannya

Sebuah media query terdiri dari kata kunci @media, sebuah kondisi di dalam tanda kurung, lalu blok aturan CSS di dalam kurung kurawal yang akan dijalankan jika kondisi terpenuhi. Begitu kamu mengenali empat bagian ini, kamu bisa membaca media query apa pun yang kamu temui di kode orang lain. Mari bedah satu per satu.

@media (min-width: 768px) {
  .kartu {
    width: 50%;
  }
}

• @media, kata kunci yang memberi tahu browser: “berikut ini adalah aturan bersyarat.” Semua media query selalu diawali dengan ini.
• (min-width: 768px), ini kondisinya (sering disebut media feature). Artinya “berlaku kalau lebar viewport minimal 768px”. min-width berarti “minimal”, jadi kondisinya benar untuk 768px ke atas.
• { ... }, blok berisi aturan CSS biasa. Isinya sama persis seperti CSS yang kamu tulis sehari-hari; bedanya, aturan ini hanya aktif saat kondisi di atas terpenuhi.

Dua kondisi yang paling wajib kamu kuasai adalah min-width dan max-width, dan keduanya sering bikin pemula bingung karena terdengar terbalik dari intuisi:

/* min-width: berlaku dari nilai ini KE ATAS (layar lebar) */
@media (min-width: 768px) {
  /* aturan untuk tablet & desktop */
}

/* max-width: berlaku dari nilai ini KE BAWAH (layar sempit) */
@media (max-width: 767px) {
  /* aturan untuk HP saja */
}

Cara mengingatnya: min-width: 768px berarti “lebar minimal 768px”, jadi menyala di layar besar. max-width: 767px berarti “lebar maksimal 767px”, jadi menyala di layar kecil. Salah membedakan keduanya adalah sumber bug responsive nomor satu bagi pemula, jadi tanamkan baik-baik.

Apa Itu Breakpoint? Titik di Mana Layout “Patah”

Breakpoint adalah nilai lebar layar tertentu tempat kamu memutuskan layout website perlu berubah, misalnya dari satu kolom menjadi dua kolom. Istilahnya berasal dari kata break (patah): di titik itulah tampilanmu “patah” dari satu bentuk ke bentuk lain. Breakpoint yang kamu tulis di dalam @media (min-width: ...) itulah yang menentukan kapan perubahan terjadi.

Tidak ada breakpoint yang “benar” secara mutlak, tapi ada nilai-nilai yang jadi konvensi umum karena kira-kira mewakili kategori perangkat:

Angka-angka ini mungkin terasa familiar kalau kamu pernah memakai Tailwind CSS, framework itu memakai sm: 640px, md: 768px, lg: 1024px, dan xl: 1280px sebagai breakpoint bawaannya. Bahkan kalau kamu menulis CSS murni, meniru nilai-nilai konvensional ini adalah awal yang aman. Kalau kamu sedang belajar Tailwind, cara kerja prefix responsive-nya (md:flex, lg:grid) kami bahas lengkap di panduan Tailwind CSS, di baliknya, semua prefix itu tak lain adalah media query yang sudah dikemas rapi.

Coba Langsung: Geser Lebar Layar dan Lihat Media Query Bekerja

Teori tadi akan langsung “klik” begitu kamu melihatnya bergerak. Di playground bawah ini ada sebuah preview mini beserta slider lebar layar. Geser slidernya melewati angka 768px dan perhatikan dua hal sekaligus: layout preview berubah dari menumpuk (mobile) menjadi berjajar (desktop), dan blok @media di kode paling bawah menyala ketika aturannya aktif.

/* Default: mobile-first, layout menumpuk */
.layout { display: flex; flex-direction: column; }

@media (min-width: 768px) {
  .layout { flex-direction: row; }
}

Perhatikan bahwa di bawah 768px, hanya aturan default (mobile-first) yang berlaku sehingga elemen menumpuk vertikal. Begitu lebar mencapai 768px, blok @media (min-width: 768px) “menyala” (berwarna hijau) dan flex-direction: row menimpa aturan default, elemen langsung berjajar horizontal. Inilah persis yang terjadi di website sungguhan saat pengunjung memutar HP-nya atau membuka halamanmu di laptop. Kamu tidak menulis dua halaman; kamu menulis satu, dengan aturan yang menyesuaikan diri.

Mobile-First: Cara Menulis Media Query yang Benar

Mobile-first adalah pendekatan menulis CSS dengan gaya untuk layar kecil (HP) sebagai default terlebih dahulu, lalu menambahkan media query min-width untuk memperkaya tampilan di layar yang lebih besar. Ini adalah standar industri modern, dan bukan sekadar tren, ada alasan teknis dan praktis yang kuat di baliknya. Mari lihat bedanya dengan pendekatan lama (desktop-first).

Pada mobile-first, CSS dasarmu (tanpa media query) ditujukan untuk HP. Media query hanya kamu tambahkan untuk menambah kerumitan saat layar melebar:

/* DEFAULT = gaya untuk HP (mobile-first) */
.galeri {
  display: grid;
  grid-template-columns: 1fr;   /* HP: 1 kolom */
  gap: 16px;
}

/* Tablet ke atas: perkaya jadi 2 kolom */
@media (min-width: 768px) {
  .galeri {
    grid-template-columns: 1fr 1fr;
  }
}

/* Laptop ke atas: perkaya lagi jadi 3 kolom */
@media (min-width: 1024px) {
  .galeri {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Perhatikan alurnya: mulai dari yang paling sederhana (1 kolom), lalu menambahkan kolom seiring layar membesar. Kebalikannya, pendekatan desktop-first mulai dari layout rumit lalu memakai max-width untuk menyederhanakannya di layar kecil:

/* DEFAULT = gaya untuk desktop (desktop-first, gaya lama) */
.galeri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* default: 3 kolom */
}

/* Perkecil untuk layar sempit */
@media (max-width: 1023px) {
  .galeri { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .galeri { grid-template-columns: 1fr; }
}

Kenapa mobile-first lebih disukai? Tiga alasan praktis: (1) HP adalah perangkat paling terbatas, mendesainnya lebih dulu memaksamu memprioritaskan konten yang benar-benar penting. (2) Kode mobile-first cenderung lebih ringkas dan progresif (menambah, bukan membatalkan). (3) HP dengan koneksi lambat memuat CSS default lebih dulu; kalau default-nya sudah ringan, halaman terasa lebih cepat. Untuk mengatur susunan kolom seperti contoh di atas, kamu akan sangat terbantu oleh CSS Grid dan Flexbox, dua alat layout yang menjadi pasangan alami media query.

Contoh Lengkap: Membuat Navigasi yang Responsive

Cara tercepat memahami media query adalah membangun satu komponen nyata yang berubah bentuk, dan tidak ada contoh yang lebih klasik daripada menu navigasi yang menumpuk vertikal di HP lalu berjajar horizontal di desktop. Kita akan membangunnya dari nol dengan gaya mobile-first.

Langkah 1: HTML

<nav class="navbar">
  <a class="logo" href="#">BelajarWeb</a>
  <ul class="menu">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Artikel</a></li>
    <li><a href="#">Tentang</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

Langkah 2: CSS Default (untuk HP)

Kita mulai dari tampilan HP: logo di atas, menu menumpuk vertikal di bawahnya.

* { box-sizing: border-box; }

.navbar {
  display: flex;
  flex-direction: column;   /* HP: logo & menu menumpuk vertikal */
  gap: 12px;
  padding: 16px;
  background: #0f172a;
}
.menu {
  display: flex;
  flex-direction: column;   /* HP: item menu menumpuk */
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu a { color: #e2e8f0; text-decoration: none; }

Langkah 3: Tambahkan Media Query untuk Layar Lebar

Sekarang kita tambahkan aturan yang hanya menyala di tablet ke atas: ubah arah menjadi horizontal.

@media (min-width: 768px) {
  .navbar {
    flex-direction: row;          /* desktop: berjajar horizontal */
    align-items: center;
    justify-content: space-between;
  }
  .menu {
    flex-direction: row;          /* desktop: item menu berjajar */
    gap: 24px;
  }
}

Selesai. Satu file CSS, dua tampilan. Di HP, seluruh navbar menumpuk rapi ke bawah; di layar 768px ke atas, logo ada di kiri dan menu berjajar di kanan. Perhatikan bahwa kita tidak pernah menulis ulang aturan warna atau padding, media query hanya menimpa bagian yang perlu berubah (flex-direction dan tata letaknya). Sisanya diwarisi dari default. Inilah keindahan mobile-first: perubahan minimal, hasil maksimal.

Menggabungkan Beberapa Kondisi: and, koma, dan Rentang

Kamu bisa menggabungkan beberapa kondisi dalam satu media query menggunakan and (kedua syarat harus benar) atau koma (salah satu syarat benar sudah cukup). Ini berguna saat kamu ingin menargetkan rentang tertentu, misalnya “hanya tablet” (di antara dua ukuran) atau “orientasi tertentu di lebar tertentu”.

/* AND: berlaku hanya kalau lebar ANTARA 768px dan 1023px (khusus tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { display: none; }
}

/* Koma = ATAU: berlaku kalau layar sangat sempit ATAU dalam mode portrait */
@media (max-width: 480px), (orientation: portrait) {
  .banner { font-size: 14px; }
}

/* Menggabungkan lebar dengan orientasi */
@media (min-width: 768px) and (orientation: landscape) {
  .hero { height: 100vh; }
}

and mempersempit (semua kondisi harus terpenuhi), sedangkan koma memperluas (cukup salah satu). Dalam praktik sehari-hari, sindrom “target satu rentang khusus tablet” seperti contoh pertama cukup jarang dibutuhkan, mobile-first dengan min-width tunggal biasanya sudah menyelesaikan 90% kebutuhan. Tapi baik untuk tahu bahwa opsi ini ada saat kamu benar-benar memerlukannya.

FAQ Seputar Media Query

Media query adalah apa dalam CSS?

Media query adalah aturan CSS yang menerapkan sekumpulan style hanya ketika kondisi tertentu terpenuhi, paling sering berdasarkan lebar layar. Ditulis dengan @media (kondisi) { ... }. Fungsinya membuat website responsive, satu halaman bisa tampil berbeda di HP, tablet, dan desktop tanpa perlu file terpisah.

Apa bedanya min-width dan max-width?

min-width: 768px berarti “berlaku kalau lebar layar minimal 768px”, jadi menyala di layar besar (768px ke atas). max-width: 768px berarti “berlaku kalau lebar layar maksimal 768px”, jadi menyala di layar kecil (768px ke bawah). Mobile-first memakai min-width; desktop-first memakai max-width.

Berapa breakpoint yang standar dipakai?

Tidak ada angka mutlak, tapi konvensi umum (mengikuti Tailwind): 640px (HP besar), 768px (tablet), 1024px (laptop), dan 1280px (desktop). Saran terbaik: jangan mendesain untuk perangkat spesifik, tambahkan breakpoint di mana pun layout mulai terlihat jelek saat jendela diperbesar/diperkecil.

Kenapa media query saya tidak bekerja di HP?

Penyebab paling umum: lupa memasang tag viewport di <head> HTML: <meta name="viewport" content="width=device-width, initial-scale=1" />. Tanpa tag ini, HP berpura-pura layarnya lebar (~980px) dan mengecilkan halaman, sehingga media query membaca lebar yang salah. Penyebab lain: salah membedakan min-width dan max-width.

Apakah media query hanya untuk lebar layar?

Tidak. Selain width, media query bisa mengecek tinggi (min-height), orientasi (orientation: landscape / portrait), preferensi tema gelap (prefers-color-scheme: dark), preferensi kurangi animasi (prefers-reduced-motion), dan banyak lagi. Namun lebar layar (min-width/max-width) adalah yang paling sering dipakai sehari-hari.

Apakah Tailwind CSS pakai media query?

Ya. Prefix responsive Tailwind seperti md:flex atau lg:grid di baliknya adalah media query min-width biasa (md = min-width: 768px, dan seterusnya). Tailwind hanya mengemasnya jadi lebih ringkas, tapi konsep breakpoint dan mobile-first-nya sama persis dengan CSS murni.

Langkah Selanjutnya

Sekarang kamu sudah pegang gambaran utuhnya: media query adalah aturan @media yang menyalakan style tertentu berdasarkan kondisi layar, min-width untuk mobile-first, breakpoint mengikuti konten bukan merek perangkat, dan jangan lupa tag viewport. Yang membedakan orang yang “tahu media query” dan yang “jago bikin responsive” tinggal satu: jam terbang mengetik @media, memperbesar-mengecilkan browser, dan memperbaiki bagian yang patah, sampai refleks mobile-first terbentuk sendiri.

Cara tercepat membentuk refleks itu adalah latihan langsung. Mulai dari lesson media queries di Hyper Sheets untuk mengubah breakpoint sambil melihat preview berubah real-time. Setelah itu, karena media query hampir selalu bekerja berpasangan dengan sistem layout, mantapkan Flexbox dan CSS Grid sebagai alat menyusun kolom-kolommu, lalu lihat bagaimana Tailwind CSS mengemas semua breakpoint ini jadi prefix yang ringkas. Dan kalau kamu masih memantapkan dasar ukuran elemen, width dan height adalah serta padding adalah adalah fondasi yang bagus sebelum masuk ke responsive. Selamat ngoding!