Seperti yang telah Anda lihat bahwa ukuran layar sanggup mengubah warna halaman. Itulah fungsi media queries, yaitu untuk memanipulasi CSS sesuai dengan kondisi layar peramban. Namun, bukan itu fungsi utama dari media queries. Media queries tidak hanya sanggup mengubah warna halaman, tetapi juga sanggup mengubah layout sebuah website. Dan itu artinya, Anda sanggup membuat tampilan website sesuka hati Anda dengan mempertimbangkan ukuran viewport yang mungkin akan pengunjung gunakan. Hal ini memungkinkan Anda untuk membuat tampilan website yang dinamis, yang sanggup menyesuaikan diri dengan daerah dimana website tersebut dibuka. Apakah itu dari komputer, smartphone, tablet, apapun itu:
Memulai Konsep
Hal pertama yang harus Anda lakukan yaitu membuat konsep sebuah website. Tidak perlu terlalu rumit, pastikan saja Anda membuat template yang lengkap dan umum, yang terdiri dari sebuah header, navigasi, artikel, sidebar dan footer. Misalnya menyerupai ini:
HTML
<div id='outer-wrapper'> <div id='header-wrapper'> <h1>HEADER WEBSITE</h1> </div> <div id='nav'> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>Archive</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> </ul> </div> <div id='content'> <div id='main-wrapper'> ARTIKEL DI SINI... </div> <div id='sidebar-wrapper'> WIDGET DI SINI... </div> <div class='clear'></div> </div> <!-- end content --> <div id='footer-wrapper'> Copyright 2011 - Taufik Nurrohman </div> </div> <!-- end outer-wrapper -->CSS
h1,h2,h3,h4,h5,h6,ul,ol,li { margin:0 0 0 0; padding:0 0 0 0; border:none; } body { background:#fff; margin:0;padding:0; text-align:center; font:normal normal 70% Arial,Sans-Serif; } #outer-wrapper { width:1030px; margin:0 auto 0; text-align:left; background:#ddd; } #header-wrapper { padding:2%; margin:0; display:block; background:#666; } #nav { background:#999; font:normal normal 1em Arial,Sans-Serif; overflow:hidden; } #nav ul { margin:0; padding:0; height:auto; } #nav ul li { margin:0; float:left; display:inline; list-style:none; } #nav ul li a { display:block; padding:5px 10px; background:#999; color:#fff; } #nav ul li a:hover { background:#888; text-decoration:none; } #content { clear:both; display:block; } #main-wrapper { width:71%; padding:2%; word-wrap:break-word; overflow:hidden; float:left; display:inline; background:#eee; } #sidebar-wrapper { width:21%; padding:2%; word-wrap:break-word; overflow:hidden; float:right; display:inline; background:#ddd; } #footer-wrapper { padding:2%; clear:both; display:block; background:#666; } .clear {clear:both}Di sini saya mengeset lebar #outer-wrapper sebesar 1030px kemudian mengeset ukuran #sidebar-wrapper dan #main-wrapper memakai persentase. Perhitungan persentase sebuah tampilan website yang ideal sanggup Anda pelajari di sini.
Menerapkan Media Queries
Buatlah beberapa peraturan yang tegas:
- Saat ukuran layar telah mencapai 1030 piksel, set lebar
#outer-wrappermenjadi 100%. Hal ini akan membuat template menjadi gampang mengikuti keadaan dengan viewport yang lebih sempit dari 1030 piksel. - Saat lebar viewport lebih kecil dari 600 piksel, set posisi
#main-wrapperdan#sidebar-wrappermenjadi elemen blok dalam satu kolom.
Menuliskan lebar sebesar 100% akan mempermudah template dalam beradaptasi, alasannya yaitu persentase tidak diukur menurut keadaan elemen, melainkan menurut daerah dimana elemen tersebut berada. Harap diingat pula beberapa deklarasi penting yang harus Anda terapkan dikala membuat layout satu kolom.
Seperti yang kita tahu, bahwa untuk membuat kolom, deklarasi yang umum dipakai yaitu float:left atau float:right, display:inline dan width:N. Maka dikala Anda ingin membuat layout satu kolom dari elemen yang tadinya berupa dua kolom, hal yang terpenting yang harus Anda lakukan pertama kali yaitu netralisasi float dan display. Setelah itu set lebar elemen menjadi auto semoga lebar elemen sanggup menyesuaikan diri. Setelah itu terserah Anda:
@media screen and (max-width:1030px) { #outer-wrapper { width:100%; } } @media screen and (max-width:600px) { #sidebar-wrapper, #main-wrapper { float:none; display:block; width:auto; padding:5%; } }Gambar Responsif
Untuk membuat gambar menjadi responsif, Anda sanggup menambahkan instruksi ini dalam CSS:
img { max-width:100%; height:auto; width:auto\9; /* IE8 */ }Hal yang sama juga sanggup Anda lakukan untuk embed video dan iframe:
embed,object,iframe { width:100%; height:auto; min-height:300px; }Meta Tag Skala pada Perangkat Seluler
Secara normal, perangkat seluler yang canggih akan memperkecil skala halaman website dikala dibuka. Dengan memakai meta tag ini, perangkat tersebut tidak akan menyesuaikan skala halaman dan akan menerapkan skala menyerupai apa adanya:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>Orientasi Viewport
Jika Anda memakai tablet atau iPhone maka orientasi sanggup berubah secara otomatis dari portrait menjadi landscape atau sebaliknya dikala Anda memutarnya. Saya tidak tahu apakah komputer Anda mempunyai akomodasi jago menyerupai itu atau tidak. Jadi, kini coba balik komputer Anda dan lihat apakah orientasinya berubah? :))
@media screen and (orientation:portrait) { /* Tampilan Portrait Website Anda */ } @media screen and (orientation:landscape) { /* Tampilan Landscape Website Anda */ }Masalah Background Image yang terlalu Besar
Tidak menyerupai gambar pada umumnya, background-image tidak sanggup responsif, alasannya yaitu ia yaitu gambar yang hanya dijadikan sebagai background sebuah objek, bukan dijadikan sebagai objek itu sendiri. Untuk membuat background-image menjadi responsif, gunakan CSS background-size. Misalnya, di sini Saya akan mengubah skala background menjadi 80% dari ukuran sebenarnya dikala lebar viewport berada pada 480 piksel:
@media screen and (max-device-width:480px) { html,body { -webkit-background-size:100% auto; -moz-background-size:100% auto; -ms-background-size:100% auto; -o-background-size:100% auto; background-size:100% auto; } }Media Queries pada CSS Eksternal
Bla.. bla.. bla.... Saya yakin Anda sudah mengerti untuk yang satu ini:
<link rel='stylesheet' media='screen and (max-width: 600px)' href='600px-viewport.css'></link>Max Width, Min Width, Multiple Media Queries
Max Width
Kode di bawah akan mulai mengubah penampilan dikala lebar viewport berada pada maksimal 500 piksel dan di bawahnya:
@media screen and (max-width:500px) { ... ... }Min Width
Kode di bawah akan mulai mengubah penampilan dikala lebar viewport berada pada minimal 500 piksel dan di atasnya:
@media screen and (min-width:500px) { ... ... }Multiple Media Queries
Kode di bawah ini akan mengubah penampilan apabila lebar viewport berada di antara 500 piksel dan 900 piksel:
@media screen and (min-width:500px) and (max-width: 900px) { ... ... }Device Width
Harap bedakan antara max-width dan max-device-width. max-width dihitung menurut resolusi area, sedangkan max-device-width dihitung menurut resolusi device:
@media screen and (max-device-width:1024px) { ... ... }Media Queries untuk Device Standar
/* Smartphone (portrait & landscape) */ @media only screen and (min-device-width:320px) and (max-device-width:480px) { ... ... } /* Smartphone (landscape) */ @media only screen and (min-width:321px) { ... ... } /* Smartphone (portrait) */ @media only screen and (max-width:320px) { ... ... } /* iPad (portrait & landscape) */ @media only screen and (min-device-width:768px) and (max-device-width:1024px) { ... ... } /* iPad (landscape) */ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) { ... ... } /* iPad (portrait) */ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) { ... ... } /* Desktop & laptop */ @media only screen and (min-width:1224px) { ... ... } /* Large Screen */ @media only screen and (min-width:1824px) { ... ... } /* iPhone 4 */ @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { ... ... }