Tutorial CSS3 Media Query Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari jenis media CSS2,CSS3 Media Query,Dukungan Browser,sintaks query Multimedia,jenis media CSS3,contoh sederhana penyelidikan multimedia,referensi @media CSS3,
@media
aturan dijelaskan dalam CSS2, dan dapat disesuaikan untuk jenis media yang berbeda aturan gaya yang berbeda.
Sebagai contoh: Anda dapat menetapkan aturan gaya yang berbeda untuk berbagai jenis media yang (termasuk display, perangkat portabel, televisi, dll).
Tapi jenis multimedia mendukung pada banyak perangkat masih cukup ramah.
permintaan CSS3 multimedia mewarisi semua jenis media CSS2 pikiran: Alih-alih menemukan jenis peralatan, CSS3 pengaturan tampilan sesuai dengan adaptasi.
pertanyaan media dapat digunakan untuk mendeteksi berbagai hal, seperti:
Saat ini, banyak untuk ponsel Apple, ponsel Android, tablet dan perangkat lainnya akan digunakan untuk menampilkan query.
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
milik | |||||
---|---|---|---|---|---|
@media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Permintaan Multimedia disusun oleh berbagai media, dapat berisi satu atau lebih ekspresi, ekspresi didirikan sesuai dengan kondisi mengembalikan benar atau salah.
@media not|only mediatype and (expressions) { CSS-Code; }
Jika media ditentukan jenis pencocokan jenis perangkat, permintaan kembali benar, dokumen akan menunjukkan efek dari gaya ditentukan dalam pencocokan perangkat.
Kecuali Anda menggunakan tidak hanya operator atau sebaliknya, semua gaya akan menyesuaikan tampilan pada semua perangkat.
tidak: tidak boleh digunakan untuk mengecualikan perangkat tertentu, seperti @media tidak mencetak (peralatan non-printing).
hanya: untuk mengatur beberapa jenis media khusus.Dukungan untuk Media Query perangkat mobile, jika hanya ada kata kunci, browser Web untuk perangkat mobile akan mengabaikan satu-satunya kunci dan ekspresi setelah aplikasi langsung dari gaya berkas. Untuk Media Query bila perangkat tidak mendukung kemampuan untuk membaca, tetapi Media Jenis jenis browser Web, kata kunci yang dihadapi hanya mengabaikan berkas gaya ini.
semua: semua perangkat, ini harus selalu melihat.
Anda juga dapat menggunakan file gaya yang berbeda pada media yang berbeda:
nilai | deskripsi |
---|---|
semua | Digunakan untuk semua jenis perangkat multimedia |
mencetak | untuk printer |
layar | Untuk layar komputer, tablet, smartphone. |
pidato | Untuk pembaca layar |
Menggunakan query multimedia dapat digunakan untuk menggantikan gaya asli yang sesuai dengan gaya pada perangkat tertentu.
Contoh berikut mengubah warna latar belakang pada layar terlihat ukuran jendela peralatan lebih besar dari 480 piksel:
Contoh berikut ini terlihat di ukuran layar window lebih besar dari 480 pixel akan mengapung ke halaman menu kiri:
Temukan konten multimedia lainnya dapat merujuk @media aturan.