Pada zaman dahulu, orang-orang mengakses internet hanya menggunakan komputer. Dan komputer ini menggunakan layar dengan ukuran standar, dengan resolusi besar. Namun dalam perkembangannya, muncul banyak device lain yang turut mengakses internet, seperti laptop, tablet, dan smartphone.

Yang menjadi permasalahan disini adalah ukuran resolusi dari device yang digunakan untuk mengakses internet menjadi berbeda-beda. Terutama bagi yang mengakses internet menggunakan smartphone, sehingga layar yang digunakan berresolusi kecil. Situs-situs yang tadinya dirancang untuk dilihat menggunakan komputer, menjadi tidak nyaman untuk dilihat menggunakan smartphone.

Pada masa-masa awal smartphone, pengembang situs biasanya membuat versi mobile dari situsnya. Biasanya versi mobile ini ditaruh pada subdomain m, dan pada saat server mendeteksi pengunjungnya sedang menggunakan smartphone, maka server secara otomatis melakukan redirect ke situs mobile. Mungkin teman-teman masih ingat kalau dulu pernah mengakses subdomain seperti m.facebook.com, atau m.tokopedia.com. Situs mobile ini harus dikembangkan tersendiri, berbeda dari situs utama yang ditujukan untuk pengguna komputer. Jadi programmer harus melakukan pemograman sebanyak 2 kali untuk satu situs yang sama.

Dalam perkembangan berikutnya, muncul solusi baru yang bernama responsive. Responsive ini berarti programmer hanya membuat satu buah situs, dan kode CSS-nya akan merespon device yang sedang digunakan untuk mengakses halaman tersebut, bisa berupa ukuran layar yang sedang digunakan, seperti layar kecil pada smartphone atau layar besar pada komputer. Bisa juga berupa orientasi dari device, apakah portrait atau landscape. Dan masih ada banyak parameter lain.

Dengan menggunakan design responsive, kita bisa membuat agar halaman situs kita tetap nyaman untuk dibaca , baik dari smartphone, tablet maupun komputer. Sebagai contoh disini saya membuat situs SkysenSolution.Com menggunakan design responsive, dan perhatikan bahwa halaman situs tetap bisa dibaca dengan nyaman baik menggunakan smartphone, tablet maupun komputer.

Cara membuat design responsive adalah dengan menggunakan Media Query. Dengan menggunakan Media Query, kita bisa menuliskan kode CSS yang berbeda, berdasarkan parameter dari device yang sedang digunakan, seperti lebar layar, orientasi, jenis device, dan lain-lain. Yang paling sering digunakan adalah lebar layar.

Ini adalah contoh dari kode Media Query. Jadi kita menuliskan kode awal @media lalu diikuti dengan tanda kurung dan parameter yang digunakan. Dan kemudian di dalam media, kita menuliskan kode CSS seperti biasa. Sebagai contoh disini kita menggunakan parameter max-width: 1200px, yang artinya semua kode CSS yang berada di dalam media ini akan dijalakan apabila lebar browser yang sedang digunakan lebih kecil atau sama dengan 1200 pixel.

Oke, sekarang kita mulai praktek coding. Saya sudah membuat satu file HTML yang isinya boilerplate, dengan konten sederhana yaitu sebuah judul “Media Query”. Kemudian file ini saya link ke CSS, yang isinya hanya satu selector h1, untuk mengubah teks ke tengah layar. Hasilnya bisa dilihat di browser seperti ini.

Nah, sebagai contoh, kita tambahkan kode CSS @media. Lalu buka kurung. Sebagai contoh pertama, kita berikan parameter width dengan nilai 800 pixel. Tutup kurung. Lalu kita tambahkan kurung kurawal.

Artinya semua kode CSS yang berada di dalam media ini akan dijalankan apabila ukuran lebar browser adalah 800 pixel. Sebagai contoh, kita tambahkan selector h1. Lalu kita tambahkan properti background-color dengan nilai red. Kita simpan dan refresh browser.

Tidak ada perubahan pada browser ya. Kita buka developer tools. Lalu kita ubah ukuran layar. Perhatikan pada saat ukuran browser tepat 800 pixel, barulah muncul warna latar belakang merah. Apabila ukuran browser berubah walaupun hanya 1 pixel saja, maka warna latar belakangnya kembali menghilang. Oleh karena itu media query width seperti ini tidak disarankan untuk digunakan. Lebih baik kita menggunakan min-width atau max-width. Sebagai contoh saya gunakan min-width 800 pixel, yang artinya kode yang memberikan warna latar belakang merah ini akan dijalankan apabila lebar browser 800 pixel atau lebih besar.

Kita simpan dan refresh browser. Sekarang kita lihat, apabila ukuran browser kecil, maka judul tidak memiliki warna latar belakang. Namun apabila kita perbesar, hingga ukuran lebar browser minimal di 800 pixel, maka warna latar belakang judul berubah menjadi merah.

Apabila kita ganti min-width menjadi max-width, maka yang akan terjadi adalah sebaliknya. Judul tidak memiliki warna latar belakang pada saat ukuran lebar browser besar. Dan akan berubah menjadi berlatar belakang merah pada saat ukuran lebar browser 800 pixel atau lebih kecil.

Kita bisa menggabungkan beberapa parameter Media Query, sebagai contoh kita tambahkan and min-width dengan nilai 600 pixel. Dan apabila kita coba pada browser mulai dari ukuran kecil. Judul akan mendapatkan warna latar belakang merah apabila ukuran browser sudah mencapai minimal 600 pixel. Namun setelah ukuran browser lebih besar dari 800 pixel, maka warna latar belakang pada judul kembali menghilang. Jadi kode CSS disini dijalankan pada saat ukuran browser 600 hingga 800 pixel.

Namun ada cara lain yang lebih sering digunakan. Sebagai contoh, di luar media query, kita berikan warna latar belakang biru. Kemudian di media query pertama, kita berikan parameter min-width 800 pixel, lalu kita berikan warna latar belakang merah. Dan kemudian kita copy paste kode medua query kita. Dan pada media query kedua, kita ubah parameternya menjadi min-width 1200 pixel, dan kita beri warna latar belakang hijau. Kita simpan dan refresh browser.

Sekarang apabila kita mulai dari ukuran browser paling kecil, maka browser akan menggunakan CSS default kita yang berada di luar media query, yaitu warna biru. Kemudian pada saat memasuki ukuran 800 pixel, maka warna latar belakang berubah menjadi merah. Dan yang terakhir pada saat memasuki ukuran 1200 pixel, maka warna latar belakang berubah menjadi hijau.

Kita juga bisa menggunakan cara kebalikannya ya. Kita ganti parameter pada media query dari min-width menjadi max-width. Kita simpan dan refresh browser. Nah, sekarang CSS default kita dijalankan pada saat ukuran browser paling besar. Kemudian pada saat saya kecilkan layar, maka warna latar belakang judul menjadi hijau. Dan kemudian pada saat layar paling kecil, ternyata warna latar belakang tetap hijau ya.

Mengapa hal ini terjadi? Kita lihat dari developer tools. Disini kita lihat bahwa warna background-color yang digunakan adalah green, yang berasal dari media dengan max-width 1200 pixel. Lalu dibawahnya background-color dengan nilai red yang dicoret, yang berasal dari media dengan max-width 800 pixel. Dan dibawahnya lagi ada background-color dengan nilai blue, yang berasal dari CSS default.

Kalau kita lihat kembali dari source code CSS kita. Browser membaca source code kita dimulai dari atas kebawah. Jadi kalau kita perhatikan dari paling atas, pertama browser mengubah warna latar belakang menjadi biru terlebih dahulu. Kemudian masuk ke media dengan max-width 800 pixel, berhubung kondisi browser memenuhi syarat, maka warna latar belakang yang tadinya biru dicoret, diganti dengan warna merah. Kemudian browser masuk ke meda dengan max-width 1200 pixel, dan berhubung kondisinya juga memenuhi syarat, maka warna latar belakang merah dicoret, diganti dengan hijau. Artinya kode pada media max-width 800pixel tidak pernah dijalankan karena selalu digantikan oleh max-width 1200 pixel.

Untuk memperbaikinya, maka kita bisa mengubah urutan dari parameter max-width. Nilai yang besar diletakkan di atas. Jadi media pertama kita ubah menjadi max-width dengan nilai 1200 pixel. Sedangkan media kedua kita ubah menjadi max-width dengan nilai 800 pixel. Kita simpan dan refresh browser. Nah, sekarang pada saat browser paling kecil, maka warna latar belakang judul adalah hijau. Kalau kita perbesar, berubah menjadi merah. Dan pada saat paling besar warna latar belakang judul menjadi biru.

Bagi teman-teman yang ingin tau apa saja sih parameter yang bisa digunakan dalam media query? Kita bisa melakukan search di Google dengan kata kunci Using Media Query. Dan kemudian kita bisa melihat dokumentasi dari MDN.

Disini kita bisa melihat parameter-parameter apa saja yang bisa kita gunakan dalam media query. Perhatikan pada bagian notes, apabila ada tulisan Added in Media Queries Level sekian, artinya parameter ini baru diimplementasikan. Artinya hanya pengunjung yang menggunakan browser versi paling baru saja yang bisa menggunakan parameter ini.

Kemudian disini juga ada tulisan Deprecated in Media Queries Level sekian. Artinya parameter ini sudah tidak digunakan lagi pada browser terbaru. Sebaiknya kita pun udah tidak menggunakan parameter ini di media query kita. Nantinya teman-teman bisa membaca sendiri dan menelurusi lebih lanjut apa saja parameter di dalam media query, untuk apa fungsinya dan bagaimana cara menggunakannya.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.