Modul ini membahas desain responsif dari dua arah: media query yang merespons ukuran viewport dan container query yang merespons ukuran kontainernya. Gambar responsif dibahas sebagai bagian dari strategi pengiriman, lalu seluruh teknik digabungkan menjadi sistem layout fluid.
Desain responsif
Modul adaptasi layar: media query, container query, gambar responsif, dan sistem layout fluid.
0/0 selesai
- Media query
Media query, pemilihan breakpoint, dan strategi mobile-first.
- Container query
Responsivitas pada aras komponen dengan container query sejak 2023.
- Gambar responsif
Atribut srcset dan elemen picture untuk mengirimkan gambar sesuai ukuran layar.
- Sistem layout fluid
Penggabungan clamp(), grid auto-fit, dan container query menjadi sistem layout fluid.