Penjelasan Sederhana Website Responsif dan Media Query
Memahami apa itu website yang responsive dan bagaimana membuatnya
Apa itu Responsive?
Awal saya mendengar kata “responsive”
Saat awal saya belajar tentang blog, saya selalu keliling ke berbagai web untuk mencari template yang cocok dengan niche blognya. Ya, cuma keliling, download, pasang, nulis nggak pernah.
Ketika saya melihat daftar fitur template yang disediakan, sering kali terdapat satu kata yang saya tidak tahu artinya, tapi banyak dicari orang. Hampir tiap section komentar terdapat satu kata ini, “responsive”.
Saya bingung maksud dari template yang responsive itu apa, karena kalau diterjemahkan ke Bahasa Indonesia pun juga terdengar nonsense.
Apa itu responsive?
Sampai saya mulai belajar frontend development, saya baru tahu maksud dari kata “responsive” tersebut. Ternyata “respon” di sini itu bukan respon seperti halnya membalas pesan atau semacamnya, tapi merespon terhadap ukuran layar perangkat.
Pernah kalian lihat website yang kalau dibuka di desktop ada sidebarnya, pas di handphone sidebarnya sembunyi? Atau saat kalian mengecilkan ukuran jendela browser, tampilan webnya tiba-tiba berubah, beradaptasi dengan ukurannya? Itu lah apa yang dimaksud dengan template yang responsive.
Media Query
Bagaimana cara membuat website yang responsive?
Kalian mungkin tidak sadar bahwa selama ini ternyata kita sering membuka website yang menerapkan template responsive, dan mungkin kalian juga tidak tahu ternyata responsive bukan lah hal yang otomatis, melainkan harus diatur secara manual oleh developernya.
Misalnya tampilan di HP dengan di tablet berbeda, maka artinya si developer harus menulis dua kode CSS untuk masing-masing tampilan web tersebut. Lumayan terdengar ribet ya? Emang.
Seperti yang kita ketahui, untuk membuat frontend website pada dasarnya cukup menggunakan dua bahasa, yaitu HTML dan CSS. HTML sebagai kerangka dan konten, sedangkan CSS sebagai pengatur style atau tampilannya.
Di dalam CSS, terdapat apa yang disebut dengan “media query”. Kegunaan dari media query ini adalah untuk mengatur style yang diterapkan berdasarkan ukuran layar perangkat.
Berikut adalah contoh penerapan sederhana media query
@media (max-width: 960px) {
/* Semua css di dalam blok ini akan diterapkan saat lebar layar perangkat berukuran di bawah atau sama dengan 960px */
div {
border-radius: 50%;
background: red;
}
}@media (min-width: 961px) {
/* Semua css di dalam blok ini akan diterapkan saat lebar layar perangkat berukuran di atas atau sama dengan 961px */
div {
background: blue;
}
}
Berikut demonya:
Klik tombol “Run Pen”, kemudian klik tombol-tombol di bawahnya untuk mensimulasikan ukuran layar yang berbeda.
Dalam contoh tersebut dapat dilihat elemen div berwarna biru kotak ketika ditampilkan pada layar berukuran di atas atau sama dengan 961px (min-width: 961px), dan akan menjadi warna merah lingkaran ketika di bawah atau sama dengan 960px (max-width: 960px).
Oh ya, jika kalian mempraktikan ini di komputer sendiri, jangan lupa bahwa kalian wajib menambahkan ini di dalam tag head agar ukuran elemen dapat di-scale dengan benar oleh browser
<meta name="viewport" content="width=device-width, initial-scale=1">Untuk media query sebenarnya masih memiliki fitur yang lebih banyak lagi, tapi tentu tidak akan saya bahas di sini, karena s̶a̶y̶a̶ ̶m̶a̶l̶e̶s̶ ̶n̶u̶l̶i̶s̶n̶y̶a ini bukan artikel dokumentasi.
Karena sebaik-baiknya developer adalah developer yang bisa belajar dari dokumentasi.
Terima kasih sudah membaca.
