@Media CSS at-rule pada CSS memungkinkan kita menentukan sekumpulan CSS yang hanya diterapkan ke jenis media tertentu yang juga dapat kita tentukan dalam deklarasi @media. Kita akan lanjutkan pembahasan mengenai @media RULE pada CSS. Bagi teman-teman yang belum mengikuti part-1, bisa klik disini ya
Kueri media digunakan untuk memberikan CSS untuk dokumen atau element HTML yang bergantung pada kondisi media yang dipermasalahkan. Kasus penggunaan yang paling umum adalah menggunakan kueri media dengan jenis media layar untuk menentukan gaya yang memungkinkan halaman web atau elemen di halaman untuk beradaptasi dengan ukuran dan orientasi layar yang berbeda, sebagai bagian dari alur kerja desain web responsif.
Kueri media adalah ekspresi logis yang benar atau salah. Jika hasil kueri benar, artinya, jika agen pengguna berjalan dalam jenis media yang cocok dengan jenis media yang ditentukan, dan jika kondisi jenis media juga cocok (misalnya ukuran layar), maka aturan gaya di dalam blok media akan diterapkan.
Misalnya, deklarasi @media berikut akan menentukan sekumpulan gaya untuk jenis media layar tergantung pada ukuran layar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@media screen and (max-width: 800px) { } @media screen and (orientation: landscape) { } @media screen and (orientation: portrait) { } @media handheld and (min-width: 200px), screen and (min-width: 200px) { } @media screen and (device-aspect-ratio: 16/9) { } |
Ada daftar kemungkinan media queries yang digunakan sebagai kondisi untuk jenis media yang ditentukan, termasuk orientasi, lebar viewport, lebar perangkat, ketinggian viewport, warna, rasio aspek, antara lain. Untuk informasi lebih lanjut tentang mereka, periksa spesifikasi Media Queries untuk daftar kemungkinan nilai dan banyak contoh.
Anda dapat menyatakan aturan @media di mana pun di dalam CSS kalian. Teman-teman bahkan dapat memilih untuk menggunakan stylesheet terpisah untuk deklarasi @media dan kemudian mengimpornya ke dalam stylesheet utama menggunakan @import at-rule.
Penulisan secara Official penggunaan @media RULE pada CSS:
|
1 2 3 |
@media media-types [and media-query-conditions]? { } |
Tanda tanya menunjukkan bahwa kondisi permintaan media bersifat opsional. Jika beberapa jenis media disediakan, mereka harus dipisahkan dengan koma.
Value
Berikut ini adalah daftar jenis media yang diakui yang dapat digunakan dalam deklarasi aturan @media:
- All (cocok untuk seluruh perangkat/device)
- print (Ditujukan untuk bahan halaman dan untuk dokumen yang dilihat di layar dalam mode pratinjau cetak.)
- screen (Ditujukan terutama untuk layar komputer berwarna. Ini adalah jenis media yang paling sering digunakan dalam desain web.)
- speech (Ditujukan untuk synthesizer)
Untuk beberapa contoh dan beberapa catatan untuk Mengenal @media RULE pada CSS, akan dibahas lagi pada postingan berikutnya, Stay tune terus dan Happy Coding!