CSS 10: Desain Responsif dan Media Query

Desain responsif berarti halaman tetap mudah dibaca dan digunakan pada berbagai ukuran layar. Tujuannya bukan membuat tampilan identik, melainkan memastikan isi dan tindakan utama tetap nyaman.

1. Demo Mobile-First

Ubah pilihan viewport sandbox antara Mobile, Tablet, dan Desktop untuk melihat perubahannya.

2. Cara Kerja Mobile-First

Gaya dasar memakai satu kolom dan navigasi vertikal. Saat ruang minimal 700px, layout menjadi dua kolom dan navigasi menjadi baris. Pada 1000px, kartu menjadi tiga kolom.

Meta viewport membuat lebar halaman mengikuti perangkat. Container fleksibel menyisakan jarak 16px di kedua sisi dan tidak melebihi 1100px.

3. Memilih Breakpoint

Tidak ada angka breakpoint yang wajib untuk semua project. Sempitkan browser dan perhatikan kapan isi mulai berdesakan. Letakkan breakpoint berdasarkan kebutuhan isi, bukan nama perangkat.

4. Menguji Tampilan

Uji sekitar 320px, 768px, 1024px, dan beberapa ukuran di antaranya. Periksa scroll horizontal, teks terpotong, tombol tertutup, dan area klik terlalu kecil. Uji juga zoom browser 200%.

Kesalahan yang Sering Terjadi

• Menulis ukuran tetap besar pada konten utama.
• Membuat breakpoint berdasarkan satu model perangkat.
• Menggunakan terlalu banyak media query untuk memperbaiki CSS yang tidak fleksibel.
• Menyembunyikan informasi penting pada layar kecil.

Latihan

Ubah breakpoint pertama menjadi 600px dan kedua menjadi 900px. Tambahkan kartu keempat lalu periksa tampilan pada ketiga pilihan viewport sandbox.

Ringkasan

Mulailah dengan meta viewport dan ukuran fleksibel. Tulis gaya dasar untuk layar kecil, lalu tambahkan perubahan dengan @media (min-width: ...) ketika konten membutuhkan lebih banyak ruang.