Dengan pesatnya popularitas perangkat seluler, pengguna tidak lagi hanya menggunakan komputer tradisional untuk menelusuri konten Web. Semakin banyak pengguna mulai menggunakan ponsel cerdas, tablet, atau perangkat lain dengan berbagai ukuran untuk menelusuri konten Web pengguna perangkat yang berbeda dapat mendapatkan pengalaman yang baik, mereka perlu menggunakan kueri media.
Kueri media adalah salah satu fungsi terpenting dari lembar gaya CSS. Yang disebut kueri media mengacu pada membedakan berbagai perangkat (seperti komputer, ponsel, tablet, perangkat Braille, dll.) berdasarkan jenis media (tipe perangkat) yang berbeda. dan kondisi. Dan tentukan gaya CSS yang berbeda untuk masing-masingnya. Kueri media memungkinkan CSS bertindak lebih akurat pada perangkat berbeda atau kondisi berbeda pada perangkat yang sama, sehingga semua pengguna bisa mendapatkan pengalaman pengguna yang baik.
1. Jenis media
Jenis media digunakan untuk mewakili kategori perangkat. CSS menyediakan beberapa kata kunci untuk mewakili jenis media yang berbeda, seperti yang ditunjukkan dalam tabel berikut:
2. Ciri-ciri media
Selain tipe tertentu, karakteristik spesifik perangkat juga dapat digambarkan melalui beberapa atribut, seperti lebar, tinggi, resolusi, dll, seperti terlihat pada tabel berikut:
3. Operator logika
Operator logika tidak mencakup, dan, dan saja. Kueri media yang kompleks dapat dibuat melalui operator logika. Anda juga dapat memisahkan beberapa kueri media dengan koma dan menggabungkannya menjadi satu aturan.
dan: Digunakan untuk menggabungkan beberapa kueri media menjadi satu kueri media. Jika setiap aturan kueri benar, kueri media juga benar.
tidak: digunakan untuk meniadakan kueri media. Jika aturan kueri tidak benar, ia akan mengembalikan nilai benar, jika tidak maka akan mengembalikan salah. Jika operator not digunakan, jenis media juga harus ditentukan;
only: hanya akan berlaku jika seluruh kueri cocok. Ketika only tidak digunakan, browser lama hanya akan menafsirkan layar dan (lebar maksimal: 500 piksel) sebagai layar, mengabaikan kueri lainnya, dan menerapkan gaya ke Semua layar. Jika Anda menggunakan satu-satunya operator, Anda juga harus menentukan jenis media.
4. Tentukan pertanyaan media
Saat ini Anda dapat menentukan kueri media dengan dua cara:
Gunakan aturan @media atau @import untuk menentukan jenis perangkat yang sesuai di style sheet;
Gunakan atribut media untuk menentukan jenis perangkat tertentu dalam <style>, <link>, <source>, atau elemen HTML lainnya.
(1)@media
Kami telah melihat secara singkat @media di bagian "CSS @Rules". Dengan menggunakan @media Anda dapat menentukan sekumpulan kueri media dan blok gaya CSS. Jika dan hanya jika kueri media cocok dengan perangkat yang digunakan, gaya CSS yang ditentukan akan diterapkan pada dokumen. Contoh kodenya adalah sebagai berikut:
/*Pada layar yang kurang dari atau sama dengan 992 piksel, atur warna latar belakang menjadi biru*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*Pada layar 600 piksel atau kurang Pada layar, atur warna latar belakang menjadi zaitun */@mediascreenand(max-width:600px){body{background-color:olive;}}(2) @impor
@import digunakan untuk mengimpor file gaya eksternal tertentu dan menentukan jenis media target.
@importurl(css/screen.css)screen;/*Memperkenalkan gaya eksternal, gaya ini hanya akan diterapkan pada monitor komputer*/@importurl(css/print.css)print;/*Memperkenalkan gaya eksternal, gaya ini hanya akan diterapkan diterapkan pada Perangkat pencetakan*/badan{background:#f5f5f5;line-height:1.2;}Catatan: Semua pernyataan @import harus muncul di awal style sheet, dan gaya yang ditentukan dalam style sheet akan menggantikan gaya yang bertentangan di style sheet eksternal yang diimpor.
(3) atribut media
Anda juga dapat menentukan kueri media di atribut media <style>, <link>, <source> dan tag lainnya.
/*Terapkan gaya ini ketika lebar halaman lebih besar atau sama dengan 900 piksel*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*Terapkan gaya ini ketika lebar halaman kurang dari atau sama dengan 600 piksel*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
Tip: Anda juga dapat menentukan beberapa jenis media di atribut media, menggunakan koma untuk memisahkan setiap jenis media, misalnya, media=layar, cetak.