Media Queries

Fluid layout menangani perubahan ukuran, tetapi ada saatnya susunan halaman harus berubah total: deretan kolom menyusun ulang menjadi satu kolom, sidebar pindah ke bawah, navigasi merapat. Untuk perubahan struktural seperti ini kita memakai media query — aturan CSS yang hanya berlaku bila syarat tertentu terpenuhi. Chapter ini membedah anatomi media query, sintaks lebar modern dan klasik, serta operator logika untuk menggabungkan syarat.

Anatomi Media Query #

Bentuk lengkap sebuah media query terdiri dari tiga bagian:

@media screen and (min-width: 640px) {
  .kartu-artikel {
    display: flex;
    gap: 14px;
  }
}

1. @media: at-rule yang membuka blok bersyarat. Semua aturan di dalam blok hanya berlaku bila syaratnya terpenuhi.
2. screen: media type — perangkat target. Nilai lainnya all (semua media) dan print (saat halaman dicetak). Bila media type tidak ditulis, nilainya otomatis all.
3. and (min-width: 640px): syarat media feature. Bagian ini menyaring berdasarkan karakteristik perangkat, di sini lebar viewport minimal 640px.

Blok .kartu-artikel di atas hanya aktif di layar yang lebarnya 640px ke atas. Di luar syarat itu, browser mengabaikan seluruh isi bloknya seolah tidak pernah ditulis — dan gaya dasar di luar media query tetap berlaku.

Demo berikut menerapkan tiga tahap gaya pada kartu yang sama: dasar untuk layar sempit, penyempurnaan di 640px, dan aksen tambahan di 960px:

Media query di dalam bingkai menilai lebar bingkai itu sendiri — bila jendela browser terlalu lebar, kecilkan perlahan agar setiap tahap dapat diamati.

Kondisi Lebar dan Tinggi #

Dua fitur yang paling sering dipakai adalah width dan height, keduanya mengukur viewport — ruang yang tersedia untuk halaman, bukan ukuran fisik layar. Ada dua sintaks yang sama-sama valid:

Sintaks range (width >= 640px) sudah didukung seluruh browser modern dan lebih mudah dibaca karena mengikuti cara kita berpikir: “lebar minimal 640px”. Sintaks klasik min-width/max-width tetap valid dan masih banyak dipakai di kode lama, jadi kita perlu nyaman membaca keduanya. Keunggulan tambahan sintaks range adalah kemampuan menuliskan rentang (640px <= width < 1024px) tanpa batas yang saling bertabrakan pada nilai yang sama.

Operator Logika: and, Koma, dan not #

Beberapa syarat digabung dengan operator logika:

/* and: semua syarat harus terpenuhi */
@media screen and (min-width: 640px) { /* ... */ }

/* koma: or — cukup satu syarat terpenuhi */
@media (orientation: landscape), (min-width: 1024px) { /* ... */ }

/* not: membalik seluruh media query */
@media not print { /* ... */ }

Tiga catatan penting:

• and mengikat semua syarat sekaligus. Menambah satu syarat lagi membuat aturan semakin sempit cakupannya, bukan semakin luas.
• Koma artinya “atau”. Ini warisan sintaks lama; media query modern juga mengizinkan or di dalam kurung, tetapi koma adalah bentuk yang paling aman dipakai.
• not membalik keseluruhan query, bukan hanya satu syarat. Karena itu not sering ditulis bersama media type agar maknanya jelas.

Fitur Media yang Sering Dipakai #

Selain lebar, beberapa media feature ini akan sering kita temui:

Sebagai pengenalan, media query tema gelap hanya butuh beberapa baris:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111827;
    color: #e5e7eb;
  }
}

Bila sistem operasi pengguna memakai mode gelap, perpindahan ini terjadi otomatis — tanpa tombol dan tanpa JavaScript.

Ringkasan #

Media query adalah alat bersyarat CSS: blok @media berisi media type dan media feature, dengan width sebagai fitur utama untuk breakpoint. Sintaks range modern dan sintaks min-width/max-width klasik sama-sama valid, digabungkan lewat and (semua syarat), koma (atau), dan dibalik lewat not. Dengan media query kita mengubah struktur halaman pada lebar tertentu — dan pertanyaan berikutnya adalah lebar seperti apa yang patut dipilih: itulah topik chapter breakpoint.