Kueri Media CSS
Jenis Media yang Diperkenalkan CSS2
Aturan @media, yang diperkenalkan di CSS2, memungkinkan untuk menentukan aturan gaya yang berbeda untuk jenis media yang berbeda.
Contoh: Anda dapat memiliki satu set aturan gaya untuk layar komputer, satu untuk printer, satu untuk perangkat genggam, satu untuk perangkat tipe televisi, dan seterusnya.
Sayangnya jenis media ini tidak pernah mendapat banyak dukungan oleh perangkat, selain jenis media cetak.
Kueri Media yang Diperkenalkan CSS3
Kueri media di CSS3 memperluas gagasan jenis media CSS2: Alih-alih mencari jenis perangkat, mereka melihat kemampuan perangkat.
Media query dapat digunakan untuk memeriksa banyak hal, seperti:
- lebar dan tinggi viewport
- lebar dan tinggi perangkat
- orientasi (apakah tablet/ponsel dalam mode lanskap atau potret?)
- resolusi
Menggunakan kueri media adalah teknik populer untuk mengirimkan lembar gaya yang disesuaikan ke desktop, laptop, tablet, dan ponsel (seperti ponsel iPhone dan Android).
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung @mediaaturan.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Sintaks Kueri Media
Kueri media terdiri dari jenis media dan dapat berisi satu atau lebih ekspresi, yang diselesaikan menjadi benar atau salah.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Hasil kueri benar jika jenis media yang ditentukan cocok dengan jenis perangkat tempat dokumen ditampilkan dan semua ekspresi dalam kueri media benar. Ketika kueri media benar, lembar gaya atau aturan gaya yang sesuai diterapkan, mengikuti aturan kaskade normal.
Kecuali Anda menggunakan operator not atau only, jenis media bersifat opsional dan
alljenisnya akan tersirat.
Anda juga dapat memiliki stylesheet yang berbeda untuk media yang berbeda:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
Jenis Media CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Media Query Contoh Sederhana
Salah satu cara untuk menggunakan kueri media adalah dengan memiliki bagian CSS alternatif tepat di dalam lembar gaya Anda.
Contoh berikut mengubah warna latar belakang menjadi hijau muda jika area pandang memiliki lebar 480 piksel atau lebih lebar (jika area pandang kurang dari 480 piksel, warna latar akan menjadi merah muda):
Contoh
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Contoh berikut menunjukkan menu yang akan melayang di sebelah kiri halaman jika area pandang lebar atau lebih lebar 480 piksel (jika area pandang kurang dari 480 piksel, menu akan berada di atas konten):
Contoh
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Contoh Kueri Media Lainnya
Untuk lebih banyak contoh tentang kueri media, buka halaman berikutnya: Contoh MQ CSS .
Referensi CSS @media
Untuk gambaran lengkap tentang semua jenis dan fitur/ekspresi media, silakan lihat aturan @media di referensi CSS kami .