Media Query untuk Web Responsif

Konsep Media Query adalah sebuah halaman web akan menampilkan layout yang berbeda berdasarkan media yang kita gunakan. Yang dimaksud media ini bisa berupa screen, information pills 3d-glasses, sildenafil print maupun resolution.

Berikut contoh sederhana halaman web yang menggunakan konsep media query.

Konsep media query inilah yang akhir-akhir ini banyak digunakan untuk menampilkan sebuah halaman web/blog ke dalam layout/tampilan yang berbeda ketika dia diakses melalui komputer desktop dan mobile device.

Jika pada teknologi sebelumnya sebuah web akan di-redirect ke URL tertentu untuk mendapatkan layout yang berbeda ketika diakses melalui perangkat mobile (misalnya dulu ketika kita mengakses facebook melalui HP, maka kita akan di-redirect ke facebook yang versi mobile m.facebook.com). Maka dengan menggunakan konsep media query, seorang web developer hanya perlu mendefinisikan syntax CSS (dalam hal ini CSS3), untuk memfilter kondisi perangkat yang digunakan oleh user ketika mengakses halaman web, kemudian memberikan reaksi (tampilan) tertentu atas kondisi tersebut, tanpa berpindah ke domain/subdomain yang lain.

Ilustrasinya bisa digambakan sebagai berikut :

Syntax CSS3 “@media” inilah yang digunakan untuk mendefinisikan sebuah tampilan web berdasarkan media digunakan tersebut. Syntax @media ini, ibarat statement “if” yang akan menyeleksi sebuah kondisi (media) dan memilih style yang akan diterapkan berdasarkan kondisi tersebut.

Berikut penulisannya:

[sourcecode language=”css”]
/* css jika tampilan desktop/normal */
body {
width: 1024px;
}
…
/* Css untuk tampilan tablet */
@media all and (min-width: 768px) and (max-width: 991px) {
body {
width: 768px;
}
…

/* Css untuk tampilan wide mobile */
@media all and (min-width: 480px) and (max-width: 767px) {
body {
width: 480px;
}
…
[/sourcecode]

Jika anda ingin mendefinisikan CSS tersebut hanya untuk media screen saja, maka anda bisa mengganti “@media all”, menjadi “@media only screen” seperti berikut :

[sourcecode language=”css”]
@media only screen and (min-width:1024px) {
selector {
…
…
}
}
[/sourcecode]

Terapkan syntax tersebut pada css blog anda dan lihatlah hasilnya…

Sederhana bukan?? Selamat mencoba…