Breakpoint

Setelah media query dikuasai, muncul pertanyaan yang menentukan kualitas CSS responsif kita: pada lebar berapa sebaiknya layout berubah? Nilai-nilai itu disebut breakpoint — dan keputusan menempatkannya sering keliru sejak awal karena diarahkan ke daftar perangkat. Chapter ini menegaskan prinsip yang lebih tahan lama: breakpoint dipilih dari konten, bukan dari ponsel atau tablet tertentu.

Breakpoint Itu Milik Konten #

Breakpoint adalah nilai lebar viewport di mana layout berubah susunannya — titik saat min-width masuk atau keluar. Kesalahan yang paling sering terjadi adalah mencari daftar lebar resmi untuk setiap perangkat di pasaran. Pendekatan itu rapuh: perangkat baru terus dirilis dengan ukuran berbeda, dan layout kita tidak pernah bertemu dengan seluruhnya.

Cara yang benar bekerja dari konten kita sendiri:

1. Buka halaman dengan layout dasarnya.
2. Persempit viewport perlahan dan amati kontennya.
3. Tandai lebar saat konten mulai tidak nyaman — baris teks terlalu panjang, kartu menyempit hingga sempit sekali, menu mulai bertumpuk.
4. Letakkan breakpoint di sana, lalu ulangi dari titik baru.

Hasilnya pasti berbeda antar halaman, dan itu wajar. Halaman katalog dengan tiga kartu mungkin butuh breakpoint di 700px, sementara halaman artikel teks muda cukup dengan satu breakpoint di 800px. Breakpoint lahir dari kebutuhan konten, bukan dari spesifikasi perangkat.

Skala Breakpoint yang Umum #

Meski breakpoint bersifat per-proyek, ada gunanya juga memakai skala yang lazim sebagai titik awal. Banyak framework CSS memakai skala serupa:

Manfaat skala ini adalah konsistensi: seluruh anggota tim menulis min-width: 1024px dengan makna yang sama, dan angka-angka itu sudah “teruji” menutupi mayoritas kasus. Perlakukan skala itu sebagai titik awal yang boleh disesuaikan — bila konten kita ternyata retak di 880px, jangan memaksakan konten menunggu 1024px.

Yang perlu dihindari adalah menamai breakpoint berdasarkan perangkat: @media (min-width: 768px) { /* tablet */ }. Komentar seperti itu menyesatkan — 768px juga dicapai banyak laptop kecil dalam jendela ter-pisah dan ponsel landscape. Nama md lebih aman karena hanya menyebut urutan skala.

Demo berikut memakai nilai sm (640px) dan lg (1024px) dari skala itu untuk mengatur jumlah kolom galeri:

.galeri-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .galeri-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .galeri-grid { grid-template-columns: repeat(3, 1fr); }
}

Setiap peralihan di demo terjadi tepat ketika susunan sebelumnya mulai tidak nyaman dibaca — contoh nyata prinsip memilih breakpoint dari konten, bukan dari daftar perangkat.

Terlalu Banyak Breakpoint Itu Mahal #

Setiap breakpoint yang ditambahkan berarti: satu set aturan lagi yang harus ditulis, diuji, dan dirawat. Ketika breakpoint menumpuk — 8, 10, atau lebih — biayanya terasa pada setiap perubahan desain: satu penyesuaian kecil menuntut penyuntingan di banyak blok media query sekaligus.

Praktik yang sehat untuk proyek menengah adalah 2 hingga 4 breakpoint utama. Angka ini hampir selalu cukup bila layout dasarnya fluid — fluid layout sudah menyerap perubahan kecil, sehingga breakpoint hanya dipakai untuk perubahan struktur yang sungguh diperlukan. Jika kita mendapati diri menulis breakpoint baru untuk memperbaiki beberapa piksel saja, biasanya yang bermasalah adalah lebar dasarnya, bukan kekurangan breakpoint.

Ringkasan #

Breakpoint adalah titik lebar tempat layout berubah — dipilih dengan menonton konten sendiri menyempit, bukan dengan menyalin daftar perangkat. Skala sm/md/lg/xl berguna sebagai titik awal konsisten, dengan jumlah yang dijaga tetap 2–4 utama agar CSS mudah dirawat. Sampai di sini struktur responsif kita sudah lengkap; chapter berikutnya menajamkan detailnya dengan memilih satuan yang tepat — responsive units.