Orang mengakses website dari segala macam perangkat — ponsel sambil naik bus, tablet sambil santai di sofa, monitor lebar di meja kerja. Tampilan yang kelihatan bagus di layar besar bisa berubah jadi sesak dan kacau di ponsel kalau kamu tidak memikirkannya sejak awal. Nah, desain responsif adalah cara membangun satu website yang bisa menyesuaikan diri supaya tetap enak dilihat di semua perangkat itu.
Ini materi penutup dari dasar-dasar CSS, dan sekaligus yang menyatukan semuanya. Sampai sini kamu sudah bisa menata elemen dan mengatur tata letaknya; sekarang giliranmu membuat tata letak itu cukup lentur untuk muat di layar mana pun. Senjata utamanya satu, yaitu media query, dan pola pikir yang dipakai adalah mobile-first. Yuk, kita bahas.
Kenapa responsivitas penting
Sekarang ini, lebih dari separuh trafik web datang dari ponsel. Kalau situsmu cuma jalan mulus di desktop, artinya kamu mengabaikan mayoritas pengunjung. Google pun sadar soal ini — situs yang ramah ponsel diberi peringkat lebih tinggi. Jadi desain responsif itu bukan fitur tambahan yang opsional; ini sudah jadi standar minimal buat website apa pun yang serius.
Tujuannya gampang diucapkan: satu set HTML dan CSS yang bisa menata ulang dirinya sendiri menyesuaikan layar yang sedang dipakai. Bukan bikin situs versi ponsel yang terpisah, bukan juga aplikasi — halamannya tetap satu dan sama, cuma menyesuaikan diri. Begini cara kerjanya.
Bahan pertama: tag meta viewport
Sebelum menyentuh CSS sama sekali, ada satu baris HTML yang jadi pondasi semua desain responsif. Mungkin kamu masih ingat baris ini dari artikel struktur dokumen HTML — namanya tag meta viewport, dan dia diletakkan di dalam <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Tanpa baris ini, ponsel akan mengira halamanmu memang dibuat untuk desktop, lalu mengecilkan seluruh tampilan supaya muat — hasilnya semua jadi mungil dan susah dibaca. Tag tadi pada dasarnya bilang ke browser, “pakai lebar asli perangkatnya, jangan di-zoom out.” Semua hal lain berdiri di atas baris ini — jadi kalau CSS responsifmu kok rasanya nggak ngefek, hal pertama yang patut dicurigai adalah tag viewport yang lupa dipasang.
Media query: style berbeda untuk layar berbeda
Inti dari desain responsif ada di media query — cara untuk menerapkan CSS hanya ketika layar memenuhi syarat tertentu, misalnya saat lebarnya di bawah angka tertentu. Bentuk sintaksnya seperti ini:
/* Style bawaan, berlaku untuk semua layar */
.container {
font-size: 18px;
}
/* Style ini berlaku HANYA saat lebar layar 600px atau kurang */
@media (max-width: 600px) {
.container {
font-size: 14px;
}
}Blok @media (max-width: 600px) { ... } itulah media query-nya. Apa pun yang kamu tulis di dalamnya cuma berlaku saat layar selebar 600px atau lebih sempit — biasanya berarti ponsel. Begitu layarnya lebih lebar, aturan itu diabaikan begitu saja dan style bawaan yang dipakai. Lewat cara inilah satu stylesheet bisa menyajikan tata letak yang berbeda untuk perangkat yang berbeda.
Kamu boleh memakai max-width (berlaku di bawah ukuran tertentu) atau min-width (berlaku di atas ukuran tertentu). Cuma satu ide sederhana itu — CSS yang menyala saat syaratnya terpenuhi — dan itulah seluruh rahasia di balik desain responsif.
Breakpoint: di mana tata letak berubah
Lebar layar tempat kamu mengganti tata letak itu namanya breakpoint — ukuran di mana desainmu “patah” lalu beralih ke susunan baru, misalnya grid tiga kolom yang berubah jadi satu kolom begitu dibuka di ponsel. Nggak ada daftar resmi soal ini, tapi breakpoint yang umum dipakai kira-kira mengincar kategori perangkat berikut:
| Breakpoint | Biasanya menyasar |
|---|---|
| ~480px | Ponsel |
| ~768px | Tablet |
| ~1024px | Laptop kecil |
| ~1280px+ | Desktop |
Kamu nggak harus mendukung semuanya satu per satu. Cara paling praktis yang biasa dipakai orang cuma satu atau dua breakpoint saja — misalnya satu titik di mana tata letak banyak kolom diciutkan jadi satu kolom untuk layar kecil. Tentukan breakpoint berdasarkan titik di mana desainmu sendiri mulai kelihatan janggal, bukan berpatokan pada perangkat tertentu.
Tata letak responsif dalam aksi
Sekarang kita coba bikin grid kartu yang tampil tiga kolom di desktop dan satu kolom di ponsel. Berkat Grid, kodenya tetap rapi:
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.cards {
grid-template-columns: 1fr; /* jadi satu kolom di layar kecil */
}
}Di layar lebar, kartu-kartunya tersusun dalam tiga kolom. Begitu lebar layar menyusut sampai 768px atau lebih kecil, media query-nya langsung aktif dan menggantinya jadi satu kolom, sehingga tiap kartu dapat lebar penuh dan tetap enak dibaca. Itulah inti desain responsif kalau diringkas — pasang default yang masuk akal dulu, baru pakai media query untuk menyesuaikan di bagian yang memang perlu.
Pendekatan mobile-first
Ada dua cara untuk menulis CSS responsif, dan yang lebih disarankan adalah mobile-first. Daripada mendesain untuk desktop dulu lalu repot mengecilkannya, kamu justru menulis style dasar untuk layar kecil lebih dulu, baru pakai media query min-width untuk menambahkan kerumitan saat layarnya makin besar:
/* Dasar: style untuk ponsel (satu kolom) */
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
/* Untuk layar lebih besar: tambah jumlah kolomnya */
@media (min-width: 768px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}Kenapa mobile-first jadi kebiasaan yang lebih baik
Mendesain dengan mobile-first artinya tata letakmu yang paling sederhana dan paling pokok itulah yang jadi default-nya, lalu kamu menyempurnakannya sedikit demi sedikit untuk layar yang lebih besar. Pendekatan ini cenderung menghasilkan CSS yang lebih rapi, memaksamu mendahulukan konten yang benar-benar penting, dan pas dengan kenyataan bahwa mayoritas pengunjung memang membuka situs dari ponsel. Awalnya mungkin terasa terbalik kalau kamu sudah terbiasa mendesain di layar lebar, tapi inilah cara yang dipakai kebanyakan profesional — mulai dari yang kecil, lalu dibangun ke atas.
Satuan lentur juga membantu
Media query mengurus perubahan tata letak yang besar-besar, tapi sebenarnya banyak sifat responsif yang kamu dapat gratis hanya dengan memakai satuan lentur ketimbang piksel yang kaku. Ini beberapa di antaranya yang bikin desainmu menyesuaikan diri dengan sendirinya:
- Persentase (
width: 100%) mengukur elemen relatif terhadap container-nya, jadi elemennya ikut mengecil dan membesar mengikuti wadahnya. remuntuk ukuran font membuat teks ter-scale secara konsisten dan ikut menghargai pengaturan ukuran huruf milik pengguna.frdi Grid danflexdi Flexbox (yang sudah kamu kenal sebelumnya) membagi ruang yang tersedia secara proporsional.max-widthini trik yang ampuh:max-width: 800pxmembuat elemen boleh melebar sampai 800px di layar besar, tapi tetap bebas menyusut di layar kecil.
Ada satu pola ampuh yang menggabungkan beberapa hal di atas sekaligus — sebuah container konten yang berada di tengah dan dibatasi lebar maksimalnya, tapi tetap bebas melentur selama belum menyentuh batas itu:
.container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
}Hasilnya, di monitor besar tampilannya tetap nyaman dan nggak melebar berlebihan (mentok di 1100px), sementara di ponsel dia melebar mengisi 90% lebar layar. Pola seperti ini membuat tata letak menyesuaikan diri dengan mulus, bahkan sebelum kamu menulis satu media query pun.
Uji pada ukuran sebenarnya
Kamu nggak perlu menumpuk banyak perangkat cuma buat mengecek hasil kerjamu. Buka saja developer tools di browser, lalu cari fitur “device toolbar” atau “responsive mode” (biasanya berupa ikon ponsel/tablet kecil). Dengan fitur ini kamu bisa melihat pratinjau halaman di ukuran layar berapa pun dan langsung tahu di mana tampilannya mulai berantakan. Coba juga tarik-ulur lebar jendelanya — mengamati tata letak yang menata ulang dirinya sambil kamu mempersempit jendela adalah salah satu cara tercepat untuk menemukan masalah responsif sekaligus memastikan breakpoint-mu benar-benar bekerja.
Penutup — dan akhir dari dasar-dasar CSS
Desain responsif membuat situsmu bisa dipakai di mana saja, dan sekarang kamu sudah bisa membangunnya sendiri:
- Selalu pasang tag meta viewport — inilah pondasi tempat seluruh sifat responsif bertumpu.
- Media query (
@media (max-width: 600px) { ... }) menerapkan CSS secara bersyarat sesuai ukuran layar. - Breakpoint adalah lebar layar tempat tata letakmu berganti; satu atau dua titik yang dipilih dengan tepat biasanya sudah lebih dari cukup.
- Mobile-first (style dasar untuk layar kecil, lalu query
min-widthuntuk menyempurnakan di layar yang lebih besar) adalah pendekatan yang paling disarankan. - Satuan lentur — persentase,
rem,fr,flex, danmax-width— membuat tata letak menyesuaikan diri tanpa banyak usaha tambahan.
Dan dengan ini, dasar-dasar CSS resmi lengkap. Sepanjang section ini kamu sudah menempuh perjalanan dari “apa sih CSS itu” hingga selector, warna, box model, tipografi, Flexbox, Grid, dan sekarang desain responsif. Kamu sudah sanggup mengambil HTML polos lalu menyulapnya jadi website yang tertata, rapi, dan responsif sepenuhnya — sebuah bekal keterampilan yang benar-benar berharga.
Dari sini, lapisan ketiga sekaligus terakhir dari web sudah menanti: JavaScript, bahasa yang membuat halaman jadi interaktif — menanggapi klik, memperbarui konten, dan menghidupkan HTML-mu yang sudah tertata cantik tadi. Ini petualangan yang benar-benar baru, dan kamu sudah siap menghadapinya.
