Responsive Design & Media Queries
Dulu, web developer harus membuat 2 website terpisah: www.website.com untuk komputer dan m.website.com khusus untuk HP. Sangat
melelahkan bukan?
Kini, kita menggunakan pendekatan Responsive Web Design (RWD). Artinya, kodenya cukup 1
saja, tapi tata letaknya layaknya air—ia akan menyesuaikan bentuk wadahnya, entah layar itu sebesar TV
raksasa atau sekecil layar HP jadul. Senjata utamanya adalah Media Queries.
📱 Syarat Mutlak: Tag Viewport
Sebelum kamu menulis kode CSS apapun, ada satu baris sakti di HTML yang wajib dipasang di dalam
tag <head>. Tanpa baris ini, HP akan
mencoba menampilkan web ukuran komputermu dan memaksanya mengecil (zoom-out) secara jelek!
<head>
<!-- Mantra Wajib Responsive! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>☝️ Baris ini menyuruh HP: "Tolong tampilkan web ini 100% selebar layar fisikmu, jangan mencoba me-zoom-outnya!"
🚦 Media Queries (@media)
Media query mirip seperti sebuah kondisi IF di dalam bahasa pemrograman. Kita bisa menyuruh CSS: "Hai CSS, JIKA lebar layarnya lebih kecil dari 600px (Layar HP), tolong baca perintah khusus yang ada di dalam kurung kurawal ini ya!"
1. CSS Utama (Semua Layar)
Warna dasar untuk komputer dan tablet.
.kotak-berita {
background-color: blue;
width: 50%;
}2. Overwrite saat HP (Max: 600px)
Saat layar menyempit, kode khusus HP ini menimpa kode utama sebelumnya.
@media (max-width: 600px) {
/* Kode di dalam sini cuma aktif di HP! */
.kotak-berita {
background-color: green;
width: 100%; /* Lebar penuh */
}
}📏 Titik Patah (Breakpoints) Standar
Pada ukuran piksel (px) berapa kita harus menulis ulang CSS-nya? Daripada menebak-nebak semua ukuran merk HP di dunia, developer web modern biasanya membagi desain web menjadi 3 atau 4 rentang kategori layar saja.
-
📱
Mobile First (Sifat Bawaan)
Kebanyakan framework (spt Tailwind CSS) merekomendasikan: Desainlah untuk HP dahulu tanpa @media apapun!
0 - 599px -
💊
Tablet & iPad
Ubah tata letak jika layarnya lebih besar dari 600px.
@media (min-width: 600px) -
💻
Laptop / Desktop Normal
Lebarkan layout menjadi grid kolom banyak mulai dari laptop 900px.
@media (min-width: 900px) -
🖥️
TV / Desktop Layar Lebar
Beri batas aman margin (max-width) agar konten tidak melar menyiksa mata.
@media (min-width: 1200px)
🎮 Playground: Menguji Responsive Grid
Geser garis separator putus-putus ke kiri dan ke kanan perlahan-lahan untuk mengubah lebar "Layar Simulator". Lihat bagaimana Flexbox dan Media Queries bekerjasama mengatur ulang 3 kartu di bawahnya saat menyentuh titik kritis (600px).
Produk A
Produk B
Produk C
📋 Ringkasan Emas Flexbox
<meta name="viewport" ...>
di tag HTML head jika kamu ingin layarnya membaca pixel dimensi sejati milik smartphone
tersebut.
@media(min-width: 600px) { ... }
(Titik Breakpoints) sebagai IF Condition layaknya di program biasa. "Jika ukuran layarnya masuk
range tertentu, ubahlah properti CSS yang ada di dalamnya!"
flex-direction` menjadi *row* ke
samping. Selesai!