CSS2 Diperkenalkan Jenis Media
The @media aturan, diperkenalkan pada CSS2, memungkinkan untuk menentukan aturan gaya yang berbeda untuk jenis media yang berbeda.
Contoh: Anda bisa memiliki satu set aturan gaya untuk layar komputer, satu untuk printer, satu untuk perangkat genggam, satu untuk perangkat televisi-jenis, dan sebagainya.
Sayangnya jenis media ini tidak pernah mendapat banyak dukungan oleh perangkat, selain jenis media cetak.
CSS3 Memperkenalkan Media Query
pertanyaan media di CSS3 memperpanjang CSS2 jenis media ide: Daripada mencari jenis perangkat, mereka melihat kemampuan perangkat.
pertanyaan media dapat digunakan untuk memeriksa banyak hal, seperti:
- lebar dan tinggi dari viewport
- lebar dan tinggi dari perangkat
- Orientasi (adalah tablet / ponsel dalam mode landscape atau portrait?)
- resolusi
Menggunakan pertanyaan media adalah teknik populer untuk memberikan style sheet disesuaikan dengan tablet, iPhone, dan Android.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh aturan @media.
| Milik | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Media Query Syntax
Sebuah query media yang terdiri dari jenis media dan dapat berisi satu atau lebih ekspresi, yang tekad untuk bisa benar atau salah.
@media not|onlymediatype and (expressions) {
CSS-Code;
}Hasil query adalah benar jika jenis media yang ditentukan sesuai dengan jenis perangkat dokumen sedang ditampilkan dan semua ekspresi dalam query media yang benar. Ketika permintaan media yang benar, style sheet atau gaya aturan yang sesuai diterapkan, mengikuti aturan Cascading normal.
Kecuali Anda menggunakan operator tidak atau hanya, jenis media adalah opsional dan all jenis 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 CSS3 Media
| Nilai | Deskripsi |
|---|---|
| all | Digunakan untuk semua perangkat jenis media |
| Digunakan untuk printer | |
| screen | Digunakan untuk layar komputer, tablet, ponsel pintar dll |
| speech | Digunakan untuk screenreaders bahwa "membaca" halaman keras |
Media Query Contoh Sederhana
Salah satu cara untuk menggunakan query media untuk memiliki bagian CSS alternatif tepat di dalam style sheet.
Contoh berikut mengubah background-color untuk lightgreen jika viewport adalah 480 pixel atau lebih luas (jika viewport kurang dari 480 piksel, yang background-color akan menjadi merah muda):
Contoh
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Cobalah sendiri " Contoh berikut menunjukkan menu yang akan mengapung di sebelah kiri halaman jika viewport adalah 480 pixel atau lebih luas (jika viewport kurang dari 480 piksel, menu akan berada di atas isi):
Contoh
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
Cobalah sendiri " CSS3 @media Referensi
Untuk gambaran penuh jenis semua media dan fitur / ekspresi, silahkan lihat di @media aturan dalam referensi CSS kami.