MenusLesson 56Preview gratis
Responsive Header
Lesson ini bagian dari How To · Semua level
Ringkasan
Responsive header adalah bagian atas halaman yang menyesuaikan susunan logo, menu, dan tombol aksi dengan lebar layar. Pada desktop, elemen biasanya berjajar horizontal; pada ponsel, susunannya berubah menjadi vertikal atau memakai menu ringkas. Media query dan flexbox menjadi alat utama untuk mengatur perubahan tersebut.
Poin kunci
- display: flex dan justify-content: space-between memisahkan logo, navigasi, dan tombol aksi.
- Media query mengubah arah susunan header saat lebar layar mengecil.
- flex-wrap: wrap mencegah elemen saling tumpang tindih.
- Ukuran teks dapat dibuat adaptif dengan clamp().
- Meta viewport wajib ada agar media query bekerja sesuai lebar perangkat.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.