Pertemuan 5: Responsif dan Media Query

20 Sep 2026kribbiadminWeb Programming

Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, mahasiswa mampu membuat website yang responsif menggunakan media query, unit relatif, dan pola umum tata letak yang menyesuaikan ukuran layar perangkat.

Konsep Responsif

Website responsif adalah website yang tampil dengan baik di semua ukuran layar, mulai dari ponsel hingga desktop, tanpa membuat pengguna harus men-scroll secara horizontal. Pendekatan ini biasanya berbasis mobile-first, artinya kita menulis gaya dasar untuk layar kecil terlebih dahulu lalu menambahkannya untuk layar besar.

Dua prasyarat penting adalah tag viewport di head yang memberitahu browser untuk menskala halaman sesuai lebar perangkat, dan penggunaan unit fleksibel seperti persen, rem, dan vw dibanding pixel tetap.

<code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1.0"></code>

Media Query

Media query adalah aturan CSS yang hanya berlaku jika kondisi tertentu terpenuhi, misalnya lebar layar tertentu. Sintaksnya dimulai dengan at-rule @media lalu diikuti jenis media dan kondisi dalam tanda kurung. Blok tersebut hanya aktif saat kondisi benar.

Contoh umum: ketika lebar layar maksimal 768px, menu samping disembunyikan atau susunan kolom grid diubah menjadi satu kolom. Ini memungkinkan satu file CSS melayani semua perangkat.

<code class="language-css">/* mobile-first: satu kolom */
.kartu { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* layar menengah dan besar: tiga kolom */
@media (min-width: 768px) {
  .kartu { grid-template-columns: 1fr 1fr 1fr; }
}</code>

Breakpoint dan Unit Relatif

Breakpoint adalah titik lebar di mana tata letak berubah. Nilai umum yang dipakai adalah 576px untuk ponsel besar, 768px untuk tablet, dan 992px untuk desktop, namun yang terpenting adalah menyesuaikan breakpoint dengan konten Anda, bukan menebak nilai populer.

Selain media query, gunakan unit relatif: rem untuk ukuran font berbasis akar, persen untuk lebar, dan fr untuk kolom grid. Satuan ini membuat elemen menyusut atau tumbuh mengikuti induknya secara otomatis.

<code class="language-css">body { font-size: 16px; }
h1 { font-size: 2rem; }  /* dua kali ukuran akar */
img { max-width: 100%; height: auto; }</code>

Praktik Responsif

Mulailah dengan membuat galeri satu kolom untuk ponsel, lalu gunakan media query min-width untuk menambah kolom pada layar lebih besar. Pastikan gambar menggunakan max-width 100% sehingga tidak meluber keluar layar. Uji hasil dengan DevTools browser menggunakan mode perangkat.

Untuk navigasi sederhana, ubah menu horizontal desktop menjadi menu yang disusun bertumpuk secara vertikal ketika layar mengecil, agar tidak memakan terlalu banyak ruang horizontal.

<code class="language-css">nav ul { list-style: none; display: flex; gap: 20px; }
@media (max-width: 600px) {
  nav ul { flex-direction: column; }
}</code>

Langkah Praktik

Buka halaman yang sudah dibuat pada pertemuan 4. Tambahkan tag viewport lalu gunakan media query untuk mengubah grid tiga kolom menjadi satu kolom pada layar kecil. Ubah ukuran font judul ke unit rem dan lebar gambar ke persen.

Buka DevTools, aktifkan mode device toolbar, lalu geser lebar layar dari 320px sampai 1200px. Pastikan tidak ada elemen yang meluber ke samping pada ukuran mana pun.

Konsep Kunci

Website responsif adalah website yang tampil dengan baik di semua ukuran layar, mulai dari ponsel hingga desktop, tanpa membuat pengguna harus men-scroll secara horizontal.
Pendekatan ini biasanya berbasis mobile-first, artinya kita menulis gaya dasar untuk layar kecil terlebih dahulu lalu menambahkannya untuk layar besar.
Dua prasyarat penting adalah tag viewport di head yang memberitahu browser untuk menskala halaman sesuai lebar perangkat, dan penggunaan unit fleksibel seperti persen, rem, dan vw dibanding pixel tetap.
Media query adalah aturan CSS yang hanya berlaku jika kondisi tertentu terpenuhi, misalnya lebar layar tertentu.
Sintaksnya dimulai dengan at-rule @media lalu diikuti jenis media dan kondisi dalam tanda kurung.
Blok tersebut hanya aktif saat kondisi benar.
Contoh umum: ketika lebar layar maksimal 768px, menu samping disembunyikan atau susunan kolom grid diubah menjadi satu kolom.
Ini memungkinkan satu file CSS melayani semua perangkat.
Breakpoint adalah titik lebar di mana tata letak berubah.

Contoh Kode

<code class="language-css">@media (max-width: 600px) {
  .kolom {
    grid-template-columns: 1fr;
  }
  nav ul {
    flex-direction: column;
  }
}

img {
  max-width: 100%;
  height: auto;
}</code>

<code class="language-css">body { font-size: 16px; }
h1 { font-size: 2rem; }</code>

Latihan

Jadikan halaman profil dan halaman berita dari pertemuan sebelumnya menjadi responsif dengan pendekatan mobile-first. Tetapkan dua breakpoint dan pastikan navigasi, gambar, dan grid berubah dengan tepat pada tiap ukuran layar.