cssresponsifbreakpointMenengah4 mnt baca

Strategi Breakpoint

Memilih breakpoint dari konten (bukan perangkat), pola umum, dan menghindari breakpoint berlebihan.

Masalah: breakpoint meniru perangkat

Pemula sering menulis breakpoint untuk "iPhone 14" atau "iPad", lalu panik saat muncul perangkat baru dengan ukuran beda. Ini pola pikir yang salah. Perangkat ada ratusan ukuran; kamu tidak bisa mengejar semuanya.

Prinsip: breakpoint dari konten

Cara yang benar: buka websitemu, sempitkan browser perlahan, dan perhatikan kapan layout mulai terlihat rusak (teks terlalu sempit, kartu terlalu gepeng, menu bertumpuk aneh). Di titik itulah breakpoint-mu. Breakpoint adalah respons terhadap kontenmu, bukan daftar perangkat.

css

/* Bukan: "untuk iPad" */
/* Tapi: "di bawah 820px, dua kolom kartu terlalu sempit" */
@media (max-width: 820px) {
  .grid-produk {
    grid-template-columns: repeat(2, 1fr);
  }
}

Titik awal yang masuk akal

Walau berbasis konten, titik awal umum membantu:

css

/* 640px: HP besar mulai muat 2 kolom kecil */
/* 768px: tablet portrait */
/* 1024px: tablet landscape / laptop kecil */
/* 1280px: desktop standar */

Banyak framework (Tailwind) memakai skala mirip: sm 640, md 768, lg 1024, xl 1280. Pakai sebagai titik awal, lalu sesuaikan dengan kebutuhan kontenmu.

Contoh: breakpoint berbasis komponen

Tiap komponen boleh punya breakpoint sendiri. Menu rusak di 700px, grid kartu rusak di 900px, itu wajar:

css

/* Menu butuh ruang lebih awal */
@media (max-width: 700px) {
  .menu { flex-direction: column; }
}

/* Kartu masih oke sampai lebih sempit */
@media (max-width: 900px) {
  .grid-kartu { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid-kartu { grid-template-columns: 1fr; }
}

Dengan container queries (modul tersendiri), breakpoint bahkan bisa berbasis lebar komponen, bukan lebar layar, yang lebih tepat lagi.

Hindari breakpoint berlebihan

Tanda bahaya: 6+ breakpoint untuk halaman sederhana, atau breakpoint yang bedanya hanya 50px. Setiap breakpoint adalah kode yang harus dirawat. Aturan praktis:

Mulai dari satu breakpoint utama (seringnya 768px).
Tambah hanya saat ada komponen yang benar-benar rusak di ukuran lain.
Dokumentasikan kenapa angka itu dipilih (komentar singkat).

css

/* 860px: judul hero mulai bertumpuk dengan gambar */
@media (max-width: 860px) {
  .hero { flex-direction: column; }
}

Catatan teknis: hindari breakpoint yang menarget perangkat spesifik via device-width atau resolusi, kecuali kasus khusus (misal optimasi cetak dengan @media print). Fokus pada lebar viewport konten.

Tips profesional

Catat alasan tiap breakpoint dalam komentar: /* 860px: judul bertumpuk gambar */.
Satu breakpoint global (misal 768px) + breakpoint komponen seperlunya lebih baik daripada 6 breakpoint global.
Hindari breakpoint "angka cantik" yang dipilih asal; pilih angka dari observasi konten yang rusak.

Rangkuman

Breakpoint dipilih saat konten rusak, bukan mengikuti daftar perangkat. Mulai dari sedikit, tambah seperlunya, dan beri komentar alasannya.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Temukan Titik Rusaknya

Skill observasi ini membedakan developer responsif yang baik dari yang asal meniru angka.

Di playground:

Sempitkan preview perlahan dan catat di komentar: di lebar berapa hero mulai terlihat rusak/aneh? (Jawaban tiap orang boleh beda, yang penting observasimu.)
Tambahkan breakpoint TEPAT di angka temuanmu: ubah hero menjadi kolom vertikal dan gambar menjadi full-width dengan tinggi 200px.
Beri komentar di CSS menjelaskan kenapa angka itu dipilih.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox