permintaan @media CSS3
contoh
Jika dokumen lebar kurang dari 300 piksel adalah untuk memodifikasi presentasi latar belakang (background-color):
Layar @media dan (max-width: 300px) {
body {
background-color: lightblue;
}
}
body {
background-color: lightblue;
}
}
Coba »
Definisi dan penggunaan
Gunakan pertanyaan @media, Anda dapat menentukan gaya yang berbeda untuk jenis media yang berbeda.
@media dapat diatur untuk layar yang berbeda ukuran gaya yang berbeda, terutama jika Anda perlu mengatur desain halaman responsif, @ media sangat berguna.
Bila Anda mengatur ulang ukuran browser proses, halaman akan kembali membuat halaman berdasarkan lebar browser dan tinggi.
Dukungan Browser
Angka dalam tabel menunjukkan dukungan aturan @media nomor versi browser pertama.
| aturan | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Syntax
@media mediatype dan | tidak | hanya (fitur Media) {
CSS-Code;
}
CSS-Code;
}
Anda juga dapat menggunakan stylesheet yang berbeda untuk media yang berbeda:
<Link rel = "stylesheet" Media = "mediatype dan | tidak | hanya (fitur Media)" href = "mystylesheet.css">
Jenis Media
| nilai | deskripsi |
|---|---|
| semua | Untuk semua perangkat |
| yg berhubungan dgn telinga | Usang. Untuk pidato dan synthesizer suara |
| sistem brailye | Usang. peralatan braille digunakan berhubungan-umpan balik |
| timbul | Usang. aparatus cetak buta untuk pencetakan |
| genggam | Usang. Untuk perangkat genggam atau perangkat yang lebih kecil, seperti PDA dan telepon kecil |
| mencetak | Untuk printer dan print preview |
| proyeksi | Usang. Untuk peralatan proyeksi |
| layar | Untuk layar komputer, tablet PC, ponsel pintar, dan sejenisnya. |
| pidato | Diterapkan untuk pembaca layar dan peralatan sound lainnya |
| tty | Usang. Untuk memperbaiki grid karakter, seperti telegraf, peralatan terminal dan karakter terbatas dari perangkat portabel |
| televisi | Usang. Untuk TV dan Web TV |
fitur media
| nilai | deskripsi |
|---|---|
| aspek-rasio | Mendefinisikan perangkat output di daerah tampak dari halaman lebar ke rasio tinggi |
| warna | Mendefinisikan perangkat output di masing-masing kelompok jumlah asli warna. Jika tidak perangkat warna, nilai sama dengan 0 |
| Warna-index | Jumlah entri dalam warna meja melihat-up didefinisikan dalam perangkat output. Jika Anda tidak menggunakan tabel warna lookup, nilai sama dengan 0 |
| perangkat-aspek-rasio | definisi layar perangkat output lebar terlihat rasio tinggi. |
| perangkat-height | definisi layar perangkat output tinggi terlihat. |
| perangkat-lebar | definisi layar perangkat output lebar terlihat. |
| kisi | perangkat output yang digunakan untuk query apakah grid atau kisi. |
| tinggi | Mendefinisikan perangkat output di daerah tampak dari halaman ketinggian. |
| max-aspek-rasio | definisi layar perangkat output rasio maksimum terlihat lebar dengan tinggi. |
| max-warna | Tentukan jumlah maksimum perangkat output setiap set warna asli. |
| max-warna-index | Jumlah maksimum entri dalam warna meja melihat-up didefinisikan dalam perangkat output. |
| max-perangkat-aspek-rasio | definisi layar perangkat output rasio maksimum terlihat lebar dengan tinggi. |
| max-perangkat-tinggi | Layar menentukan perangkat output terlihat dengan ketinggian maksimum. |
| max-perangkat-lebar | definisi layar perangkat output terlihat lebar maksimum. |
| max-height | Mendefinisikan perangkat output di daerah tampak dari ketinggian maksimum halaman. |
| max-monokrom | Didefinisikan dalam kerangka monokrom penyangga mengandung per pixel adalah jumlah maksimum monokrom asli. |
| max resolusi | Resolusi maksimal mendefinisikan perangkat. |
| max-width | Mendefinisikan perangkat output di daerah tampak dari lebar maksimum halaman. |
| min-aspek-rasio | Mendefinisikan perangkat output di daerah halaman terlihat rasio minimum lebar dengan tinggi. |
| min-warna | Mendefinisikan perangkat output setiap nomor minimum yang ditetapkan dari dokumen asli berwarna. |
| min-warna-index | Jumlah minimum entri dalam warna meja melihat-up didefinisikan dalam perangkat output. |
| min-perangkat-aspek-rasio | Layar menentukan rasio minimum perangkat output terlihat lebar dengan tinggi. |
| min-perangkat-lebar | perangkat output layar didefinisikan lebar terlihat minimum. |
| min-perangkat-tinggi | Minimum menentukan ketinggian terlihat layar output perangkat. |
| min-height | Mendefinisikan perangkat output di daerah tampak dari ketinggian minimum halaman. |
| min-monokrom | Jumlah minimum asli warna didefinisikan dalam frame buffer monokrom berisi per pixel |
| min resolusi | Resolusi minimum mendefinisikan perangkat. |
| min-width | Mendefinisikan perangkat output di daerah tampak dari lebar minimum halaman. |
| satu warna | Didefinisikan dalam frame buffer monokrom berisi per nomor asli pixel monokrom. Jika tidak perangkat monokrom, nilai sama dengan 0 |
| orientasi | Mendefinisikan perangkat output di daerah tampak dari halaman ketinggian lebih besar dari atau sama dengan lebar. |
| resolusi | Tentukan resolusi perangkat. Seperti: 96dpi, 300dpi, 118dpcm |
| pemindaian | Proses scanning jenis Definition TV peralatan. |
| lebar | Mendefinisikan perangkat output di daerah tampak dari halaman lebar. |
contoh yang lebih
contoh
Gunakan @media query untuk membuat desain responsif:
@media hanya layar dan (max-width : 500px) {
.gridmenu {
width: 100%;
}
.gridmain {
width: 100%;
}
.gridright {
width: 100%;
}
}
.gridmenu {
width: 100%;
}
.gridmain {
width: 100%;
}
.gridright {
width: 100%;
}
}
Coba »
Pages terkait
CSS tutorial: jenis media CSS