Membuat Blog 100% Responsive Dengan Media Queries

Jaman sekarang kebutuhan akan informasi semakin meningkat, terutama informasi dari media-media online seperti website/blog, tapi apa jadinya jika informasi yang bagus tidak diimbangi media (website/blog) yang mendukung, tentu tidak akan seimbang. Dulu mungkin desain web yang Responsive belumlah menjadi prioritas sebuah web seperti jaman sekarang, karena dulu web lebih diprioritaskan untuk pengguna PC karena dulu mengakses sebuah website menggunakan seluler sangatlah susah karena fiturnya yang terbatas. Namun sekarang hal tersebut tertepiskan, karena pengakses informasi online bukan hanya dari pengguna PC melainkan juga pengguna seluler, bahkan pengakses yang berasal dari seluler melampaui pengakses dari PC, oleh karena itu web yang Responsive sekarang menjadi prioritas.

Namun bagaimanakah kita dapat membuat sebuah blog tampil Responsive ?
Nah ini dia, didalam CSS3 kita dapat menjumpai yang namanya Media Queries, seperti yang saya pahami Media Queries ini bekerja layaknya sebuah tag kondosional namun sedikit berbeda, jika didalam tag kondisional kita mengaturnya dengan perintah kondisi (contohnya "static_page"), jika media queries membuat membuat sebuah CSS bekerja pada saat Window/Browser dalam ukuran (lebar/tinggi) tertentu. Itu menurut saya, mungkin para expert CSS ada tanggapan atau pengertian lain boleh di koreksi.

Demo

Oke setelah membahas sedikit tentang apa itu Media Queries, kita berpindah ke cara penerapannya.
Kamu dapat memasukan kode berikut kedalam <style>...</style>. Media Queries ini sudah lengkap sesuai ukuran yang tersedia di responsinator.com .

@media screen and (max-width:1024px) {
CSS
}
@media screen and (max-width:940px) {
CSS
}
@media screen and (max-width:820px) {
CSS
}
@media screen and (max-width:768px) {
CSS
}
@media screen and (max-width:600px) {
CSS
}
@media screen and (max-width:568px) {
CSS
}
@media screen and (max-width:414px){
CSS
}

Lihat max-width diatas, itu memiliki arti "Jalankan perintah ini pada saat lebar window dalam ukuran maksimal berikut", itu secara sederhananya. Misalnya kamu ingin membuat ukuran area artikel blogmu tampil penuh pada ukuran maksimal 414px, kamu bisa memasukan kode berikut.


@media screen and (max-width:414px){
#main-wrapper {width:100%}
}

Nah coba saja kamu kecilkan window browsermu pada ukuran kurang dari 414px maka otomatis ukuran postmu akan penuh dan mengikuti ukuran window browser.
Ingat ! usahakan untuk tidak menggunakan ukuran dengan satuan pixel (px) tetapi gunakanlah ukuran (%) supaya ukurannya dapat menyesuaikan diri secara otomatis.

Kamu dapat melihat contoh dibawah ini untuk cara penggunaan media queries.


@media screen and (max-width:1024px) {
.post-outer {width:23%}
.post-outer:nth-child(4n+4) {margin-right:0}
}
@media screen and (max-width:940px) {
.post-outer {width:45%}
.post-outer:nth-child(4n+4) {margin-right:25px}
}
@media screen and (max-width:820px) {
.post-outer {width:44.3%;margin-left:10px}
.post-outer:nth-child(2n+4) {margin-right:0}
}
@media screen and (max-width:768px) {
.post-outer {width:45.7%;margin-left:15px;margin-right:10px}
.post-outer:nth-child(2n+4) {margin-right:0}
.post-title {padding-top:7px}
}
@media screen and (max-width:600px) {
.post-outer {width:44.3%;margin-left:15px;margin-right:10px}
.post-outer:nth-child(2n+4) {margin-right:0}
}
@media screen and (max-width:568px) {
.post-outer {width:45%;margin-left:10px}
.post-outer:nth-child(2n+2) {margin-right:0}
}
@media screen and (max-width:414px){
.post-outer {width:90%}
.post-outer:nth-child(4n+4) {margin-right:25px}
.post-outer {margin-left:15px}
.navigasi,.navigasi span,.navigasi a{font-size:10px}
.navigasi .pages {display:none}
}

Jika masih ada pertanyaan, boleh tulis dibawah.