Contoh
Mengubah background-color jika viewport adalah 480 pixel atau lebih luas:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Aturan @media digunakan untuk mendefinisikan aturan gaya yang berbeda untuk media jenis / perangkat yang berbeda.
Dalam CSS2 ini disebut jenis media, sementara di CSS3 disebut pertanyaan media.
kueri media melihat kemampuan perangkat, dan dapat digunakan untuk memeriksa banyak hal, seperti:
- lebar dan tinggi dari viewport
- lebar dan tinggi dari perangkat
- Orientasi (is the tablet/phone in landscape or portrait mode?)
- resolusi
- dan banyak lagi
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh aturan @media.
| Milik | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Syntax
@media not|onlymediatype and (media feature){
CSS-Code;
}Anda juga dapat memiliki stylesheet yang berbeda untuk media yang berbeda:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">Jenis Media
| Nilai | Deskripsi |
|---|---|
| all | Digunakan untuk semua perangkat jenis media |
| aural | Usang. Digunakan untuk pidato dan synthesizer suara |
| braille | Usang. Digunakan untuk perangkat umpan balik taktil braille |
| embossed | Usang. Digunakan untuk printer braille paged |
| handheld | Usang. Digunakan untuk perangkat kecil atau genggam |
| Digunakan untuk printer | |
| projection | Usang. Digunakan untuk presentasi diproyeksikan, seperti slide |
| screen | Digunakan untuk layar komputer, tablet, ponsel pintar dll |
| speech | Digunakan untuk screenreaders bahwa "reads" halaman keras |
| tty | Usang. Digunakan untuk media menggunakan karakter jaringan fixed-pitch, seperti teletypes dan terminal |
| tv | Usang. Digunakan untuk perangkat televisi-jenis |
Fitur Media
| Nilai | Deskripsi |
|---|---|
| aspect-ratio | Rasio antara lebar dan tinggi dari viewport |
| color | Jumlah bit per komponen warna untuk perangkat output |
| color-index | Jumlah warna perangkat dapat menampilkan |
| device-aspect-ratio | Rasio antara lebar dan tinggi dari perangkat |
| device-height | Ketinggian perangkat, seperti layar komputer |
| device-width | Lebar perangkat, seperti layar komputer |
| grid | Apakah perangkat adalah grid atau bitmap |
| height | Viewport tinggi |
| max-aspect-ratio | Rasio maksimum antara lebar dan tinggi area tampilan |
| max-color | Jumlah maksimum bit per komponen warna untuk perangkat output |
| max-color-index | Jumlah maksimum warna perangkat dapat menampilkan |
| max-device-aspect-ratio | Rasio maksimum antara lebar dan tinggi perangkat |
| max-device-height | Ketinggian maksimum perangkat, seperti layar komputer |
| max-device-width | Lebar maksimum perangkat, seperti layar komputer |
| max-height | Ketinggian maksimum area tampilan, seperti jendela browser |
| max-monochrome | Jumlah maksimum bit per "color" pada monokrom (greyscale) perangkat |
| max-resolution | Resolusi maksimum perangkat, menggunakan dpi atau dpcm |
| max-width | Lebar maksimum area tampilan, seperti jendela browser |
| min-aspect-ratio | Rasio minimum antara lebar dan tinggi dari area tampilan |
| min-color | Jumlah minimum bit per komponen warna untuk perangkat output |
| min-color-index | Jumlah minimum warna perangkat dapat menampilkan |
| min-device-aspect-ratio | Rasio minimum antara lebar dan tinggi dari perangkat |
| min-device-width | Lebar minimum perangkat, seperti layar komputer |
| min-device-height | Tinggi minimum dari perangkat, seperti layar komputer |
| min-height | Tinggi minimum dari area tampilan, seperti jendela browser |
| min-monochrome | Jumlah minimum bit per "color" pada monokrom (greyscale) perangkat |
| min-resolution | Resolusi minimum perangkat, menggunakan dpi atau dpcm |
| min-width | Lebar minimum area tampilan, seperti jendela browser |
| monochrome | Jumlah bit per "color" pada monokrom (greyscale) perangkat |
| orientation | Orientasi viewport (landscape or portrait mode) |
| overflow-block | Bagaimana perangkat output konten pegangan yang meluap viewport sepanjang sumbu blok (added in Media Queries Level 4) |
| overflow-inline | Dapat konten yang meluap viewport sepanjang sumbu inline menggulir (added in Media Queries Level 4) |
| resolution | Resolusi dari perangkat output, menggunakan dpi atau dpcm |
| scan | Proses scanning dari perangkat output |
| update-frequency | Seberapa cepat dapat perangkat output memodifikasi tampilan konten (added in Media Queries Level 4) |
| width | Viewport lebar |
Contoh lebih
Contoh
Menggunakan aturan @media untuk membuat desain responsif:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Cobalah sendiri " Pages terkait
CSS tutorial: CSS Media Queries