CSS Media Queries: Breakpoint, min-width dan max-width

Media query dalam satu contoh

Media query membungkus CSS di dalam sebuah kondisi. Aturan di dalam @media (min-width: 600px) hanya berlaku selama lebar viewport minimal 600px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Media query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .banner { padding: 16px; background: #f59e0b; color: #111827; }
    .banner::after { content: " (narrow: under 600px)"; }

    @media (min-width: 600px) {
      .banner { background: #2563eb; color: white; }
      .banner::after { content: " (wide: 600px or more)"; }
    }
  </style>
</head>
<body>
  <p class="banner">This box changes color at 600px</p>
  <p id="w"></p>
  <script>
    const show = () => { document.getElementById('w').textContent = 'This preview is ' + window.innerWidth + 'px wide.'; };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Preview-nya adalah sebuah frame, dan media query di dalamnya mengukur frame itu, bukan layarmu. Di desktop, lebarnya kurang lebih sama dengan kolom artikel ini, biasanya lebih dari 600px, jadi kotaknya biru. Perkecil jendela browser-mu sampai lebar frame turun di bawah 600px, dan kotaknya berubah menjadi kuning. Baris di bawah kotak melaporkan lebar frame secara langsung. Di ponsel, frame-nya sudah sempit, jadi kamu melihat versi kuning.

Sintaks @media

@media (min-width: 600px) { ... }                        /* one condition */
@media (min-width: 600px) and (max-width: 899px) { ... } /* both must be true */
@media (max-width: 599px), print { ... }                 /* either one (comma = or) */
@media not print { ... }                                 /* negation */
@media screen and (orientation: landscape) { ... }       /* media type plus a feature */
@media (width >= 600px) { ... }                          /* range syntax */
@media (600px <= width < 900px) { ... }                  /* a range with both ends */

and butuh spasi di kedua sisinya: (min-width: 600px)and(max-width: 900px) tidak valid dan seluruh query diabaikan. Sintaks range (width >= 600px) didukung di Chrome, Firefox, dan Safari versi terbaru, dan lebih jelas dibaca daripada min-width, terutama untuk "sampai, tetapi tidak termasuk".

Fitur yang paling sering kamu pakai:

Mobile first: breakpoint min-width

Tulis layout ponsel sebagai CSS dasar, lalu tambahkan query min-width yang mengubah layout saat ruangnya makin lebar. Setiap query cukup menjelaskan apa yang berubah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mobile first</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .cards div { background: #16a34a; color: white; padding: 18px; border-radius: 6px; }

    @media (min-width: 480px) {
      .cards { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 720px) {
      .cards { grid-template-columns: 1fr 1fr 1fr; }
    }
  </style>
</head>
<body>
  <div class="cards"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>
  <p id="out"></p>
  <script>
    const show = () => {
      const n = getComputedStyle(document.querySelector('.cards')).gridTemplateColumns.split(' ').length;
      document.getElementById('out').textContent = innerWidth + 'px wide: ' + n + ' column(s)';
    };
    addEventListener('resize', show);
    show();
  </script>
</body>
</html>

Di jendela desktop yang lebar, preview-nya lebih dari 720px, jadi kamu melihat tiga kolom. Baris di bawah grid melaporkan lebar dan jumlah kolomnya. Perkecil jendelanya, maka kolomnya turun menjadi dua di bawah 720px dan menjadi satu di bawah 480px. Urutan kedua query itu penting: keduanya bernilai benar di layar lebar, dan yang ditulis belakangan yang menang, jadi query min-width ditulis dari yang terkecil sampai terbesar. (Dengan query max-width urutannya terbalik: yang terbesar lebih dulu.)

Memilih breakpoint

Tidak ada daftar resmi. Berikut nilai yang umum dan apa yang biasanya dipisahkannya:

Cara yang lebih baik: mulai dari layout yang sempit, lebarkan jendelanya sampai ada yang terlihat salah (baris terlalu panjang, kartu terlalu lebar), lalu taruh breakpoint di situ. Dua atau tiga breakpoint sudah cukup untuk sebagian besar halaman. Sering kali kamu bahkan tidak butuh breakpoint sama sekali: repeat(auto-fit, minmax(200px, 1fr)) di grid, flex-wrap, dan clamp() menyesuaikan diri secara terus-menerus.

Setiap halaman butuh meta tag viewport

Tanpa tag ini di <head>, browser ponsel menata halaman seolah-olah layarnya selebar sekitar 980px lalu memperkecil tampilannya, jadi query min-width: 480px milikmu selalu bernilai benar dan layout ponselmu tidak pernah muncul:

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

Halaman meta viewport menjelaskan setiap nilai di dalamnya.

Mode gelap dengan prefers-color-scheme

prefers-color-scheme mengikuti pengaturan terang atau gelap di sistem operasi. Cara paling rapi untuk memakainya adalah menyimpan warna di variabel CSS, lalu hanya mengubah variabelnya di dalam query:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dark mode</title>
  <style>
    :root { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    @media (prefers-color-scheme: dark) {
      :root { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    }

    /* A theme toggle sets the same variables by hand */
    :root[data-theme="dark"] { --bg: #111827; --text: #f9fafb; --card: #1f2937; }
    :root[data-theme="light"] { --bg: #ffffff; --text: #111827; --card: #e5e7eb; }

    body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; padding: 12px; }
    .card { background: var(--card); padding: 16px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="card">This card follows your system setting, or the button.</div>
  <p><button id="toggle">Switch theme</button></p>
  <p id="out"></p>
  <script>
    const mq = matchMedia('(prefers-color-scheme: dark)');
    const root = document.documentElement;
    const show = () => {
      document.getElementById('out').textContent =
        'Dark mode query matches: ' + mq.matches + '. Theme: ' + (root.dataset.theme || 'system');
    };
    document.getElementById('toggle').addEventListener('click', () => {
      const dark = root.dataset.theme ? root.dataset.theme === 'dark' : mq.matches;
      root.dataset.theme = dark ? 'light' : 'dark';
      show();
    });
    mq.addEventListener('change', show);
    show();
  </script>
</body>
</html>

Di preview ini, query-nya bisa mencetak false meskipun sistemmu diatur ke mode gelap: Chrome tidak meneruskan pengaturan sistem ke frame sandbox seperti ini. Tombolnya mengatur variabel yang sama secara manual, persis seperti cara kerja tombol ganti tema di sebuah situs. :root[data-theme] lebih spesifik daripada :root biasa di dalam query, jadi pilihan pembaca menang atas pengaturan sistem. Simpan contoh ini sebagai file dan buka untuk melihat query-nya mengikuti sistemmu.

Script-nya menunjukkan sisi lain dari media query: matchMedia() menjalankan query yang sama dari JavaScript, mengembalikan apakah query itu cocok saat ini, dan memicu event change saat jawabannya berubah. Pakai ini saat perilaku (bukan hanya tampilan) bergantung pada layar, misalnya membuka menu dengan cara yang berbeda di perangkat sentuh.

Animasi bekerja dengan cara yang sama. Bungkus animasi yang besar atau berulang dengan pengecekan prefers-reduced-motion, seperti yang ditunjukkan di halaman animation.

Container query: saat komponennya yang menentukan

Media query hanya tahu soal viewport. Sebuah kartu yang berada di kolom utama yang lebar sekaligus di sidebar yang sempit pada halaman yang sama perlu tahu ruangnya sendiri. Itulah container query: tandai elemen induk dengan container-type: inline-size, lalu pakai @container dengan kondisi yang sama.

Tarik sudut kotak abu-abu untuk mengubah ukurannya. Kartunya berganti layout saat lebar kotak mencapai 360px, berapa pun ukuran jendelanya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Container query</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .holder {
      container-type: inline-size;
      resize: horizontal;
      overflow: hidden;
      width: 480px;
      max-width: 100%;
      min-width: 160px;
      padding: 8px;
      background: #e5e7eb;
    }
    .card { display: grid; gap: 10px; background: white; padding: 10px; border-radius: 8px; }
    .pic { height: 70px; background: #2563eb; border-radius: 6px; }

    @container (min-width: 360px) {
      .card { grid-template-columns: 120px 1fr; }
    }
  </style>
</head>
<body>
  <div class="holder">
    <div class="card"><div class="pic"></div><p>Image beside the text when the box is 360px or wider, above it when narrower.</p></div>
  </div>
</body>
</html>

Di lebar awal 480px, gambarnya berada di samping teks. Tarik kotaknya sampai lebih sempit dari 376px (isi 360px ditambah padding 8px di setiap sisi), dan gambarnya pindah ke atas teks. Container query berfungsi di semua browser utama versi terbaru.

Style untuk mencetak

@media print hanya berlaku saat halaman dicetak atau disimpan sebagai PDF. Sembunyikan navigasi dan tombol, lalu pakai teks gelap di atas latar putih:

@media print {
  nav, .ad, button { display: none; }
  body { color: black; background: white; }
  a::after { content: " (" attr(href) ")"; } /* print the URL after each link */
}

Kesalahan yang sering terjadi

• Tidak ada meta tag viewport. Ponsel lalu melaporkan layout viewport yang lebar, dan query untuk layar kecil tidak pernah cocok.
• Urutan query salah. Dua query yang bernilai benar dengan selector yang sama: yang ditulis belakangan yang menang. Urutkan query min-width dari kecil ke besar.
• Batas yang tumpang tindih atau bercelah. max-width: 768px dan min-width: 768px sama-sama cocok tepat di 768px. Pakai 767px untuk salah satunya, atau sintaks range (width < 768px) dan (width >= 768px).
• Tidak ada spasi setelah and. and( tidak valid, dan query-nya dibuang tanpa pemberitahuan.
• Menguji hanya dengan mengubah ukuran jendela desktop. Periksa juga di ponsel sungguhan atau di mode perangkat browser, yang menerapkan viewport, rasio piksel, dan sentuhan ponsel.
• Terlalu banyak breakpoint. Kalau setiap komponen butuh breakpoint sendiri, coba grid auto-fit, flex-wrap, atau container query.