Membuat Responsive Layout dengan CSS Media Query Oleh: Christian Rosandhy
Di tutorial kali ini kita akan belajar membuat layout CSS Responsive dengan bantuan CSS Media Query, supaya website yang kita buat bisa dinikmati pengguna layar lebar seperti komputer/laptop, maupun pengguna layar kecil seperti handphone/tablet.
Salam jagocoding,, di tutorial saya yang ke-10 ini saya masih share tentang tutorial CSS lagi.. Sepertinya saya ditakdirkan hanya hidup di dunia CSS.. :p Duh,, jadi OOT.. -_-' Sebelumnya, kalo ada yang mau nanya "layout responsive itu kayak gimana sih?" nggak usah jauh-jauh.. kecilkan lebar browser anda, dan lihat perubahan layout website JagoCoding yang tetap rapi ini. Itulah yang dinamakan CSS Responsive. Di tutorial kali ini kita akan belajar membuat layout tersebut dengan bantuan CSS Media Query. Dari segi teknik pun CSS Media Query ini nggak terlalu ribet dipelajari kok, cuma kelemahan teknik ini adalah jadi sedikit lebih makan waktu, karena kita seolah membuat CSS untuk beberapa halaman. Untuk mengawalinya, kita buat aja layout sederhana di layar komputer biasa ya, Misalkan kita buat header, content, sidebar, dan footer. Dan didalam footer saya mau isi judul dan navigasi.
Langkah pertama, kita buat dulu CSS seperti biasa. Karena fokus kita kali ini adalah di bagian
responsive, jadi saya nggak akan terlalu menjelaskan coding per coding seperti biasanya.. #container{position:relative; margin:0px 20px;} #header{position:relative; background:#0cf; padding:10px;} #header .judul{font-size:30px; font-weight:bold; float:left;} #header .menu{float:right; background:#333; color:#fff; padding:10px;} #header:after{display:block; content:""; clear:both;} /*menghapus float dari judul dan menu*/ #content{min-height:500px; position:relative;} #content .isi{width:70%; height:500px; position:relative; background:#def; float:left;} #content .sidebar{width:30%; height:500px; position:relative; background:#079; float:right;} #content:after{display:block; content:""; clear:both;} /*menghapus float dari isi dan sidebar*/ #footer{background:#000; color:#ccc; padding:10px; font-style:italic;} Taraa.. Jadilah seperti ini..
Masih kelihatan rapi ya? Iya jelas rapi di komputer.. Kalo dibuka di tablet yang lebarnya cuma 500px apa kabar? Jadi kayak gini nih..
Mulai dari sini baru terlihat sebuah masalah, menu yang awalnya ganteng di sebelah kanan jadi nggak rapi kalo di layar yang sempit. Selain itu tempat si sidebar jadi tambah sempit juga kan? Apa sidebar lebar segitu cukup untuk kita isi-isi? Nah, disinilah CSS Media Query akan sangat berguna. CSS Media Query berfungsi mengatur baris coding CSS yang dieksekusi sesuai berdasarkan ketentuan tertentu yang kita berikan. Baris perintah CSS Media Query adalah seperti ini : @media (kondisi) { /*baris CSS yang akan dijalankan*/ }
@media (kondisi 1) and (kondisi 2) { /*baris CSS yang akan dijalankan*/ }
@media (kondisi 1) or (kondisi 2) { /*baris CSS yang akan dijalankan*/ } Diatas saya berikan 3 contoh model perintah yang bisa kita berikan. Contoh pertama,, baris CSS yang ada didalam kurung kurawal akan dieksekusi jika memenuhi ketentuan yang diberikan. Misalnya @media (min-width:900px) berarti mengeksekusi CSS didalamnya jika minimal lebar layar adalah 900px. Kalau ternyata lebar layarnya 700px? Nggak akan dieksekusi deh.. Di CSS media query kita juga bisa membuat banyak ketentuan, disambung oleh operator and atau operator or. Misalnya, @media (min-width:500px) and (max-width:800px) berarti hanya
mengeksekusi CSS didalamnya jika minimum lebar layar adalah 500px DAN maksimum 800px. Kalo lebar layar 400px? Ga dieksekusi, begitu juga kalo lebih besar dari 800px.
Umumnya, orang yang menggunakan CSS media query ini membuat ketentuan yang sangat banyak untuk menjawab kebutuhan layar pengguna dengan maksimal. Tapi saya nggak begitu suka pakai banyak-banyak,, males ah ngetiknya. soalnya jenis layout bisa disederhanakan. Kembali ke codingan yang tadi, CSS yang saya buat itu ternyata hanya enak dilihat di layar yang cukup lebar. Karena itu harus dibuat sebuah kondisi supaya komputer dengan layar yang lebih kecil tidak bisa mengeksekusinya. Dalam kasus saya sih, minimal lebar 600px deh.. Karena itu CSS saya tadi akan saya lapisi dengan kondisi seperti ini :
@media (min-width: 600px){ /*SELAMA LEBAR LAYAR TIDAK LEBIH KECIL DARI 600PX, MAKA BARIS CODING DIBAWAH INI YANG AKAN DIEKSEKUSI*/ /*baris css yang tadi*/ #container{position:relative; margin:0px 20px;} #header{position:relative; background:#0cf; padding:10px;} #header .judul{font-size:30px; font-weight:bold; float:left;} #header .menu{float:right; background:#333; color:#fff; padding:10px;} #header:after{display:block; content:""; clear:both;} #content{min-height:500px; position:relative;} #content .isi{width:70%; height:500px; position:relative; background:#def; float:left;} #content .sidebar{width:30%; height:500px; position:relative; background:#079; float:right;} #content:after{display:block; content:""; clear:both;} #footer{background:#000; color:#ccc; padding:10px; font-style:italic;} } Note : nggak ada hukum yang wajib dalam menentukan lebar minimum / lebar maksimum di media query. Semuanya tergantung kita akan membuat berapa jenis layout dan yang paling penting enak dilihat. Nah, kalau halamannya direfresh dan nggak ada perubahan apa-apa di layar lebar, artinya nggak ada masalah dalam pengetikan kita. Sekarang coba kita sempitkan layar kita sampai lebih kecil dari besar pixel yang didefinisikan di min-width..
"WAKS,, APA-APAAN NIH? KOK JADI POLOS KAYAK NGGAK DIKASI CSS?" Ini dia salah satu tantangannya pake CSS Media Query.. Karena CSS sekian panjang tadi hanya dieksekusi jika lebar minimumnya 600px, maka untuk layar dengan lebar lebih kecil dari 600px pada akhirnya nggak mengeksekusi apa-apa. Untuk itu, kita buat lagi sekali CSS Media Query, beserta isi-isinya kita buat / kopas ulang. Biarpun dikopas, isinya tetap kita bedakan khusus untuk layar kecil, supaya layar kecil punya tampilan yang enak dilihat juga (tidak seperti yang pertama itu tadi). @media (min-width:100px) and (max-width: 600px){ #container{position:relative; margin:0px 20px;} #header{position:relative; background:#0cf; padding:10px;} #header .judul{font-size:30px; font-weight:bold;} #header .menu{background:#333; color:#fff; padding:10px;} #content{min-height:500px; position:relative;} #content .isi{height:500px; position:relative; background:#def;} #content .sidebar{height:200px; position:relative; background:#079;} #footer{background:#000; color:#ccc; padding:10px; font-style:italic;} } Nah, di contoh ini saya pakai 2 kondisi yaitu batas minimum dan batas maksimum layar. Untuk lebih baiknya sih emang sebaiknya pakai 2 kondisi seperti ini sih..
Nggak ada yang terlalu spesial di baris coding CSSnya, cuma yang perlu diperhatikan,, kalau di layar lebar tadi kita bisa buat layout 2 kolom yang memanfaatkan ruang kanan dan ruang kiri (misalnya judul sama navigasi yang bersebelahan, juga content dan sidebar yang bersebelahan). Sedangkan untuk layar kecil kita nggak usah membuat yang seperti itu. Melainkan biarin aja jadi 1 kolom yang memanjang ke bawah. Makanya di CSS layar kecil ini saya hapus float left dan float rightnya.. Sehingga sekarang tampilan websitenya kalau lebar layarnya dikecilkan akan jadi seperti ini :
Nah,, seperti yang kita lihat, sekarang mau layarnya lebar ataupun sempit, layoutnya sama-sama rapi kan? Sebenarnya sampai disini kita sudah selesai dengan CSS Responsive. Tapi saya mau share 1 meta tag tambahan yang ditaruh di dalam tag head website yg bersangkutan : <meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" /> Waktu saya coba-coba belajar CSS Responsive, tampilannya udah enak banget di laptop sekalipun window browsernya dimain-mainin.. Tapi ketika udah dihosting, dan saya coba buka pake Opera Mini,, ternyata CSS Responsive saya nggak kebaca dgn baik.. -_-' Entah mengapa Opera Mini masih baca CSS Media untuk layar lebar.. Dan ternyata setelah saya masukkan meta tag diatas itu sekarang websitenya sudah bisa dibuka dengan baik di Opera Mini.. "Jadi meta tag ntu artinya apa dong?" Entahlah, saya juga kurang ngerti, mungkin ada agan yang tau dan bisa bantu.. :P
Okedeh,, sekian aja tutorial dari saya,, semoga bermanfaat untuk kita semua.. :)
Tentang Penulis Christian Rosandhy
