Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Memahami konsep responsive design dan mengapa penting
- Menggunakan media query untuk menyesuaikan tampilan di berbagai ukuran layar
- Menerapkan pendekatan mobile-first
Materi Singkat
Lebih dari 60% trafik web berasal dari perangkat mobile. Jika website-mu hanya tampil bagus di laptop tapi hancur di HP, kamu kehilangan lebih dari separuh pengunjung.
Responsive design adalah pendekatan yang membuat satu halaman web tampil optimal di semua ukuran layar — dari HP kecil (360px) hingga monitor besar (1920px+).
Media Query
Media query adalah kondisi yang kamu pasang di CSS: "Terapkan style ini hanya jika layarnya memiliki lebar tertentu."
/* Style ini berlaku di semua ukuran */
p { font-size: 14px; }
/* Tapi jika layar minimal 768px, gunakan yang ini */
@media (min-width: 768px) {
p { font-size: 16px; }
}
/* Jika layar minimal 1024px */
@media (min-width: 1024px) {
p { font-size: 18px; }
}Breakpoint Umum
| Nama | Breakpoint | Perangkat | |------|-----------|-----------| | Mobile | < 640px | HP kecil | | Tablet | ≥ 640px | HP besar, tablet | | Desktop | ≥ 1024px | Laptop, desktop | | Wide | ≥ 1280px | Monitor besar |
Mobile-First: Pendekatan yang Lebih Baik
Ada dua pendekatan:
Desktop-first (mulai dari besar, lalu kecilkan):
.container { width: 800px; } /* default untuk desktop */
@media (max-width: 768px) { /* saat layar kecil */
.container { width: 100%; }
}Mobile-first (mulai dari kecil, lalu perbesar) — direkomendasikan:
.container { width: 100%; } /* default untuk mobile */
@media (min-width: 768px) { /* saat layar besar */
.container { width: 800px; }
}Mobile-first lebih baik karena memaksa kamu berpikir dari yang paling penting dulu.
Teknik Responsif Umum
/* Gambar responsif */
img {
max-width: 100%;
height: auto;
}
/* Layout satu kolom di mobile, dua kolom di tablet */
.grid {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 640px) {
.grid {
flex-direction: row;
flex-wrap: wrap;
}
.grid > * {
flex: 1;
min-width: 200px;
}
}
/* Sembunyikan di mobile, tampilkan di desktop */
.desktop-only {
display: none;
}
@media (min-width: 1024px) {
.desktop-only {
display: block;
}
}
/* Tampilkan di mobile, sembunyikan di desktop */
.mobile-only { display: block; }
@media (min-width: 1024px) {
.mobile-only { display: none; }
}Contoh Kode
/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Mobile (default) ── */
body {
font-family: sans-serif;
font-size: 15px;
padding: 16px;
color: #1a1a1a;
}
header {
background: #1a1a1a;
color: white;
padding: 16px;
border-radius: 8px;
margin-bottom: 16px;
}
header nav {
display: none; /* sembunyikan nav di mobile */
}
.layout {
display: flex;
flex-direction: column; /* satu kolom di mobile */
gap: 16px;
}
.kartu {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
}
/* ── Tablet (≥640px) ── */
@media (min-width: 640px) {
body {
font-size: 16px;
padding: 24px;
}
.layout {
flex-direction: row; /* dua kolom di tablet */
flex-wrap: wrap;
}
.kartu {
flex: 1;
min-width: 250px;
}
}
/* ── Desktop (≥1024px) ── */
@media (min-width: 1024px) {
body {
max-width: 1000px;
margin: 0 auto;
padding: 32px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
}
header nav {
display: flex; /* tampilkan nav di desktop */
gap: 16px;
}
header nav a {
color: white;
text-decoration: none;
opacity: 0.8;
transition: opacity 0.2s;
}
header nav a:hover {
opacity: 1;
}
}Tugas Kecil
Buat halaman profilmu benar-benar responsif:
- Mobile (default):
- Satu kolom, padding 16px
- Foto profil di atas, teks di bawah (
flex-direction: column) - Navigasi disembunyikan atau disederhanakan
- Tablet (≥640px):
- Padding 24px
- Foto dan teks berdampingan (
flex-direction: row)
- Desktop (≥1024px):
max-width: 720px; margin: 0 auto- Navigasi ditampilkan penuh secara horizontal
- Font sedikit lebih besar
Tes dengan Chrome DevTools: tekan Ctrl+Shift+I → klik ikon HP kecil di pojok kiri DevTools untuk emulasi mobile.