Membuat Responsive Layout Dengan Css Media Query

9 views

Salam jagocoding,, di tutorial aku yang ke-10 ini aku masih share perihal tutorial CSS lagi.. Sepertinya aku ditakdirkan hanya hidup di dunia CSS..
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 berguru menciptakan layout tersebut dengan sumbangan CSS Media Query. Dari segi teknik pun CSS Media Query ini nggak terlalu ribet dipelajari kok, cuma kelemahan teknik ini yaitu jadi sedikit lebih makan waktu, sebab kita seolah menciptakan 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 aku mau isi judul dan navigasi.

<div id="container"><div id="header"><div class="judul">Judul Website</div><div class="menu">Home - Artikel - Gallery - Contact Us - About Us</div></div><div id="content"><div class="isi"></div><div class="sidebar"></div></div><div id="footer">Copyright &copy; 2014 <br> Created by Christian Rosandhy</div></div>

 

Langkah pertama, kita buat dulu CSS menyerupai biasa. Karena fokus kita kali ini yaitu di belahan responsive, jadi aku nggak akan terlalu menjelaskan coding per coding menyerupai 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 menyerupai ini.. 

 

Masih kelihatan rapi ya? Iya terang rapi di komputer.. Kalo dibuka di tablet yang lebarnya cuma 500px apa kabar? Makara kayak gini nih..

Mulai dari sini gres terlihat sebuah masalah, sajian yang awalnya ganteng di sebelah kanan jadi nggak rapi kalo di layar yang sempit. Selain itu daerah 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 dihukum sesuai menurut ketentuan tertentu yang kita berikan. Baris perintah CSS Media Query yaitu menyerupai 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 aku berikan 3 pola model perintah yang dapat kita berikan. Contoh pertama,, baris CSS yang ada didalam kurung kurawal akan dihukum kalau memenuhi ketentuan yang diberikan. Misalnya @media (min-width:900px) berarti mengeksekusi CSS didalamnya kalau minimal lebar layar yaitu 900px. Kalau ternyata lebar layarnya 700px? Nggak akan dihukum deh..

Di CSS media query kita juga dapat menciptakan banyak ketentuan, disambung oleh operator and atau operator or. Misalnya, @media (min-width:500px) and (max-width:800px) berarti hanya mengeksekusi CSS didalamnya kalau minimum lebar layar yaitu 500px DAN maksimum 800px. Kalo lebar layar 400px? Ga dieksekusi, begitu juga kalo lebih besar dari 800px.

 

Umumnya, orang yang memakai CSS media query ini menciptakan ketentuan yang sangat banyak untuk menjawab kebutuhan layar pengguna dengan maksimal. Tapi aku nggak begitu suka pakai banyak-banyak,, males ah ngetiknya. soalnya jenis layout dapat disederhanakan.

Kembali ke codingan yang tadi, CSS yang aku buat itu ternyata hanya yummy dilihat di layar yang cukup lebar. Karena itu harus dibentuk sebuah kondisi supaya komputer dengan layar yang lebih kecil tidak dapat mengeksekusinya. Dalam masalah aku sih, minimal lebar 600px deh.. Karena itu CSS aku tadi akan aku lapisi dengan kondisi menyerupai 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 aturan yang wajib dalam memilih lebar minimum / lebar maksimum di media query. Semuanya tergantung kita akan menciptakan berapa jenis layout dan yang paling penting yummy dilihat. 

Nah, kalau halamannya direfresh dan nggak ada perubahan apa-apa di layar lebar, artinya nggak ada duduk kasus dalam pengetikan kita. Sekarang coba kita sempitkan layar kita hingga lebih kecil dari besar pixel yang didefinisikan di min-width..

“WAKS,, APA-APAAN NIH? KOK JADI POLOS KAYAK NGGAK DIKASI CSS?” 
Ini beliau salah satu tantangannya pake CSS Media Query.. Karena CSS sekian panjang tadi hanya dihukum kalau lebar minimumnya 600px, maka untuk layar dengan lebar lebih kecil dari 600px pada kesudahannya 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 yummy dilihat juga (tidak menyerupai 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 pola ini aku pakai 2 kondisi yaitu batas minimum dan batas maksimum layar. Untuk lebih baiknya sih emang sebaiknya pakai 2 kondisi menyerupai ini sih.. 
Nggak ada yang terlalu Istimewa di baris coding CSSnya, cuma yang perlu diperhatikan,, kalau di layar lebar tadi kita dapat 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 menciptakan yang menyerupai itu. Melainkan biarin aja jadi 1 kolom yang memanjang ke bawah. Makanya di CSS layar kecil ini aku hapus float left dan float rightnya..

Sehingga kini tampilan websitenya kalau lebar layarnya dikecilkan akan jadi menyerupai ini :

Nah,, menyerupai yang kita lihat, kini mau layarnya lebar ataupun sempit, layoutnya sama-sama rapi kan? Sebenarnya hingga disini kita sudah selesai dengan CSS Responsive. Tapi aku mau share 1 meta tag perhiasan 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 aku coba-coba berguru CSS Responsive, tampilannya udah yummy banget di laptop sekalipun window browsernya dimain-mainin.. Tapi saat udah dihosting, dan aku coba buka pake Opera Mini,, ternyata CSS Responsive aku nggak kebaca dgn baik.. -_-‘
Entah mengapa Opera Mini masih baca CSS Media untuk layar lebar.. Dan ternyata sesudah aku masukkan meta tag diatas itu kini websitenya sudah dapat dibuka dengan baik di Opera Mini.. 
“Jadi meta tag ntu artinya apa dong?” Entahlah, aku juga kurang ngerti, mungkin ada agan yang tau dan dapat bantu.. 😛

 

Okedeh,, sekian aja tutorial dari saya,, semoga bermanfaat untuk kita semua..

Author: 
    author
    No related post!