@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-2, bisa klik disini ya .
Catatan
Sintaks singkatan atau biasa lebih dikenal dengan istilah shorthand ditawarkan untuk kueri media yang berlaku untuk semua jenis media; kata kunci semua dapat ditinggalkan (bersama dengan trailing ‘dan’). Artinya, jika jenis media tidak secara eksplisit diberikan itu semua. Misalnya, keduanya identik:
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
Nama jenis media itu case-insensitive, mereka itu ga peka
Jenis media di atas termasuk dalam kelompok media yang berbeda. Tabel berikut menunjukkan tipe mana yang termasuk dalam grup mana:
| Tipe Media | Grup Media | |||
|---|---|---|---|---|
| continuous, paged | visual, audio, speech, tactile | grid, bitmap | interactive, static | |
| paged | visual | bitmap | static | |
| screen | continuous | visual, audio | bitmap | both |
| speech | continuous | speech | N/A | both |
Contoh
Berikut ini mengubah tata letak bilah navigasi pada layar kecil (ketika lebar viewport kurang dari 50em) sehingga item menu diletakkan di atas satu sama lain, daripada duduk bersebelahan.
/* applies to all media */
nav ul li {
display: inline-block;
}
@media screen and (max-width: 50em) {
nav ul li {
display: block;
margin-bottom: .5em;
}
}