CSS - Media query

Materi kali ini masih lanjutan dari CSS Desain Web Responsif, yaitu Media query, dimana prinsipnya memungkinkan Anda mengelompokkan style bersama dengan menargetkan ke perangkat berdasarkan beberapa kriteria. Seperti yang pernah dijelaskan, dicontohkan sebuah halaman web akan menampilkan layout yang berbeda tergantung media yang di gunakan user. Jadi anda dapat menargetkan perangkat berdasarkan lebarnya, tingginya, atau orientasi seperti lanskap atau potret. Tentu saja salah satu yang paling jelas perbedaannya antara melihat situs web di browser desktop dan ponsel Anda adalah ukuran layar. Maka dengan menggunakan CSS Anda memiliki kekuatan untuk menghasilkan tata letak halaman web yang sangat berbeda dari HTML yang sama.

Sehingga cara paling umum untuk menyesuaikan styling dan tata letak halaman Anda dengan menyediakan style yang berbeda untuk ukuran layar yang berbeda dari perangkat pengguna. Inilah mengapa sangat penting untuk belajar setidaknya dasar-dasar cara memanfaatkan Media query. Konsep media query inilah yang banyak dipakai dalam menampilkan sebuah laman page ke dalam layout yang berbeda ketika dia diakses melalui desktop atau mobile device.

Mari kita lanjutkan, untuk penggunaan CSS Media query adalah dengan memakai syntax @media” , artinya kita mendefinisikan sebuah tampilan web berdasarkan media digunakan tersebut, kemudian diikuti oleh fitur media,dan diikuti oleh kurung kurawal. Di dalam kurung kurawal Anda memiliki style Anda.

media1

Setiap fitur media bernilai true or false. Diatas jika laman anda dikunjungi oleh user dengan perangkat yang resolusinya max- 767px, maka paragrafnya akan berwarna biru. Anda dapat memiliki lebih dari satu fitur media kombinasikan bersama menggunakan operator logika. Jika fitur media bernilai true , maka style yang berada dalam kurung kurawal berlaku. Saat menulis media query, pastikan Anda menutup kurung kurawal untuk media query secara keseluruhan dan secara terpisah untuk masing-masing aturan styling.

Coba perhatikan code berikut:

/* 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;
}
…

Baik penjelasannya adalah ketika layar memiliki resolusi maximal 1024px yang biasanya digunakan oleh desktop user, maka aturan media inilah yang diterapkan pada layar user tersebut, sebaliknya ketika resolusi layar user antara 768px – 991px maka diterapkan resolusi 768px pada layar user dan biasanya itu digunakan pada user tablet.

Jadi Anda dapat memiliki lebar maksimal, Anda dapat memiliki min-width, maka Anda bahkan dapat menargetkan orientasi perangkat Anda, potret atau lanskap. Seperti:

@media (orientation: portrait) {…}

Jika ada hal-hal ingin bervalue true, yang berlaku adalah style yang terkandung dalam kurung kurawal media kueri. Seperti yang saya sebutkan sebelumnya, meskipun ada cukup sedikit fitur media ini yang tersedia yang paling umum adalah lebar maksimal dan lebar minimum. Oke lanjutkan dengan operator logika.

Anda dapat mendesain media query secara kompleks dengan menggunakan operator logika, diantaranya not, and, dan only. Salah satu operator common logical adalah operator and. Operator and digunakan ketika menggabungkan banyak fitur media (media features) ke dalam satu media query tunggal, setiap fitur terkait harus benar (true) agar query benar (true). Sebagai contoh, inilah kode cuplikan yang menargetkan rentang lebar.

@media (min-width: 768px) and (max-width: 991px) {…}

Di sini Anda melihat kami menargetkan apa pun perangkat yang berada dalam jangkauan lebarnya berada di mana saja dengan resolusi 768 piksel hingga 991 piksel. Jika perangkat memiliki lebar yang lebih kecil dari itu atau lebih besar dari style yang diterapkan dalam media query, maka ini tidak akan berlaku.

Begitu pula ketika ingin menerapkan suatu resolusi dengan hanya untuk tampilan lanskap, Anda dapat menggunakan operator and untuk menggabungkan fitur-fitur media tersebut.

@media (min-width: 768px) and (orientation: landscape) { ... }

Media query di atas hanya akan true jika resolusi layar user adalah 768px atau lebih dan dalam tampilan lanskap. Kadang user juga menggunakan media TV dalam model lanskap anda bisa menggunakan code berikut:

@media tv and (min-width: 768px) and (orientation: landscape) { ... }

Cara lain untuk menggabungkan fitur media adalah menempatkan koma (,) di antara mereka yang pada dasarnya akan diterjemahkan ekuivalen dengan OR operator. Koma disini memjadi seperti operator logika OR ketika digunakan dalam media query. Maka Ketika media query terpisah koma, untuk value (true), aturannya codenya akan diterapkan. Setiap media query di dalam daftar terpisah koma diperlakukan sebagai query individual, dan setiap operator yang diterapkan pada satu media query tidak mempengaruhi yang lainnya. Ini berarti daftar media query terpisah koma dapat ditujukan untuk fitur, jenis, dan kondisi media yang berbeda. Perahtikan code berikut:

@media (max-width: 767px), (max-width: 992px) {…}

Dalam cuplikan kode tersebut menunjukkan bahwa kami menargetkan perangkat apa pun yang lebarnya tidak lebih besar dari 767 piksel atau perangkat apa pun yang aktif lebar setidaknya 992 piksel. Namun para developer sekarang ketika akan mendesain web desain responsif atau tata letak responsif, paling umum digunakan adalah AND Operator.

Sekarang saya ingin menunjukkan kepada Anda bagaimana membuat aturan saat menyusun media query dalam style sheet Anda. Apa yang biasanya terjadi adalah yang Anda miliki beberapa media query namun harus memulainya dengan beberapa style dasar. Style dasarlah yang pertama kali diterapkan, tidak peduli ukuran layar yang sebenarnya Anda lihat di situs web. Maka Anda akan mulai melakukan penargetan ukuran layar tertentu dengan mengubah beberapa sifat-sifat style dasar atau menambahkan sesuatu yang lain kepada mereka atau mungkin mengambil sesuatu.

Kita lihat contoh berikut:

P{ color: blue; } /*ini adalah style dasar tidak peduli ukuran layar paragraph akan berwarna biru */
.....
/*anda membuat aturan untuk layar min 1200px */
@media (min-width: 1200px) {...}

/*anda membuat aturan untuk layar min 992px dan max 1199px */
@media (min-width: 992px) and (max-width: 1199px) {...}

Disini sebagai peringatan bahwa titik penting untuk menunjukkan terutama ketika Anda menggunakan lebar ukuran layar perangkat adalah Anda harus sangat berhati-hati agar tidak terjadi tumpang tindih batas jangkauan. Jadi dalam contoh ini Anda akan melihat itu permintaan pertama memiliki lebar minimum 1200 piksel dan kueri kedua akan datang lagi kisarannya. Dan itu muncul, hingga lebar maksimal 1199 piksel, jika saya mengatakan 1200 piksel itu akan berarti akan ada tumpang tindih aturan. Jadi penting ketika Anda menyusun media query ketika memiliki batasan yang sangat bersih dan terpisah.