Breakpoints

Breakpoint adalah nilai lebar viewport tempat layout kita berubah — titik ketika satu baris konten tidak lagi nyaman dibaca, menu mulai sesak, atau kolom seharusnya berdiri berdampingan. Kesalahan umum pemula adalah mencari daftar “ukuran resmi” perangkat lalu menulis media query untuk masing-masing ponsel dan tablet. Pendekatan itu cepat usang karena perangkat baru terus bermunculan dengan lebar yang berbeda-beda. Pada Chapter ini kita membangun kebiasaan yang lebih tahan lama: memilih breakpoint dari konten itu sendiri, dengan skala umum sebagai titik awal yang wajar.

Dari Konten, Bukan dari Daftar Perangkat #

Cara kerjanya sederhana untuk dibayangkan, tetapi perlu disiplin: susun layout di lebar terkecil, lalu perlebar jendela browser pelan-pelan sampai muncul titik ketika tampilan mulai tidak nyaman — itulah breakpoint Anda. Mungkin konten butuh dua kolom pada 720px, atau butuh 980px sebelum sidebar berdampingan. Angka-angka itu berbeda antar desain karena panjang teks, ukuran gambar, dan kepadatan komponen setiap halaman berbeda.

Cara kedua (daftar perangkat) gagal karena dua alasan: jumlah lebar layar di pasar tidak berhingga, dan CSS yang menargetkan satu model ponsel tidak memberi manfaat pada model lain dengan lebar mirip. Browser juga tidak menanyakan jenis perangkat — media query hanya membaca lebar viewport.

Skala Umum sebagai Titik Awal #

Meskipun breakpoint ditentukan konten, hampir semua proyek berakhir dekat dengan skala yang lazim dipakai framework:

Gunakan skala tersebut sebagai titik mulai, lalu uji dengan konten asli: bila di 640px teks masih nyaman, tidak ada kewajiban menulis media query pada angka itu. Dua hingga tiga breakpoint biasanya cukup untuk halaman biasa; di luar itu, pertimbangkan teknik fluid (persentase, clamp(), auto-fit) yang menyelesaikan rentang lebar tanpa titik patah sama sekali.

Simpan keputusan breakpoint di satu tempat yang mudah ditemukan — komentar di awal file CSS atau halaman dokumentasi proyek. Angka yang konsisten antar komponen membuat tangga state saling terkait: navigasi berpindah pada 768px dan konten utama ikut melebar pada angka yang sama, sehingga halaman terasa menyatu alih-alih berpindah bagian demi bagian pada momen yang berlainan.

Demo: Tangga Tiga State #

Demo chapter ini menerapkan dua breakpoints — 640px dan 1024px — sehingga setiap komponen memiliki tiga state:

.panel {
  padding: 12px;                     /* state 1: ponsel */
  background: rgb(254, 249, 195);
}
@media (min-width: 640px) {
  .panel { padding: 16px; background: rgb(191, 219, 254); }   /* state 2 */
}
@media (min-width: 1024px) {
  .panel { padding: 24px; background: rgb(199, 210, 254); }   /* state 3 */
}

Mari kita telaah potongan di atas:

1. Blok dasar: state pertama ditulis tanpa media query, mengikuti pendekatan mobile first pada Chapter sebelumnya.
2. @media (min-width: 640px): mulai lebar ini panel mendapat padding 16px dan latar biru muda; di bawahnya blok ini diabaikan.
3. @media (min-width: 1024px): deklarasi di blok kedua tetap berlaku (padding 16px tidak ditulis ulang), dan blok ketiga hanya menimpa nilai yang berubah — padding 24px, latar lavender, dan font-size 18px.

Karena kondisinya berupa min-width yang berlapis, state ketiga otomatis mewarisi perubahan state kedua. Inilah keuntungan menulis secara berurutan dari kecil ke besar: setiap blok hanya menyebut yang berbeda.

Hasil di Browser:

Viewport harness 1280px — panel berada di state ketiga:
padding 24px, background rgb(199, 210, 254), font-size 18px.
Garis kiri .info menebal menjadi 8px dengan warna teks rgb(30, 64, 175).
Sudut .tombol membulat menjadi 12px.
Bila demo dibuka di 500px, ketiganya kembali ke state pertama:
padding 12px, garis 4px, sudut 4px.

Cara menguji tangga semacam ini di browser nyata — perangkat virtual, mode responsif, dan checklist manual — kita bahas tuntas pada Chapter penutup section ini.