Penjelasan terperinci tentang penggunaan Pertanyaan Media dalam css3:
Pada masa ini, tapak web lebar tetap telah beransur-ansur digantikan dengan reka bentuk responsif, yang merupakan trend yang tidak dapat dielakkan.
Reka bentuk yang dipanggil responsif bermakna halaman boleh dipaparkan dengan baik tanpa mengira skrin atau peranti yang digunakan (gaya paparan halaman mungkin berbeza pada peranti berbeza).
Reka bentuk responsif menyelesaikan cabaran yang ditimbulkan kepada pengaturcara melalui peranti pelbagai spesifikasi dan bentuk, membolehkan halaman web dipaparkan secara normal sama ada pada komputer tradisional, telefon mudah alih atau tablet.
Reka bentuk responsif boleh direalisasikan dengan baik melalui teknologi pertanyaan media Mari perkenalkan pertanyaan media di bawah.
1. Pertanyaan media dalam CSS2:
Sebenarnya, terdapat aplikasi pertanyaan media dalam css2, tetapi ia lebih mudah Lihat kod berikut:
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
Kod di atas menentukan tiga fail css. Untuk monitor, semua jenis peranti dan pencetak masing-masing.
2. Cara menggunakan pertanyaan media:
Terdapat banyak cara untuk menggunakan pertanyaan media, yang pada asasnya sesuai untuk penggunaan CSS dalam surat-menyurat satu dengan satu ia disenaraikan seperti berikut:
Diperkenalkan melalui pautan :
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
xml Kaedah pengenalan:
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
@import pengenalan kaedah:
@import url("css/reset.css") screen;Digunakan dalam kod css:
@media screen{
选择器{
属性：属性值；
}
}Digunakan pada teg gaya:
<style type="text/css" media="screen">
/*code*/
</style>
3. Peraturan pertanyaan media:
Pertanyaan media dalam CSS2 adalah sangat mudah dan hanya boleh membezakan jenis media.
CSS3 telah mengembangkan pertanyaan media, yang bukan sahaja boleh berdasarkan jenis media, tetapi juga berdasarkan atribut media yang berkaitan.
Lihat contoh kod berikut:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="softwhy.css" />
Apabila lebar halaman kurang daripada atau sama dengan 600px dan digunakan pada skrin, softwhy.,css akan dipanggil. Peraturan pertanyaan:
terdiri daripada jenis media, diikuti dengan satu atau lebih ungkapan yang menyemak keadaan tertentu (seperti lebar skrin minimum).
Walaupun kaedah penggunaan berbeza dan kaedah mentakrifkan pertanyaan media juga berbeza, seperti kaedah atribut media dan kaedah @media, peraturannya adalah sama.
(1). Kod ringkas:
@media all and (min-width:800px) {
/*code*/
} Semua skrin dengan lebar skrin mendatar minimum 800 piksel menggunakan kod css yang sepadan.
Nota khas: Jika jenis media adalah semua, semua boleh diabaikan dan dan selepas semua juga boleh diabaikan:
@media (min-width:800px) {
/*code*/
} (2).
@media (min-width:800px) and (max-width:1200px) {
/*code*/
}(3).dan Kata Kunci:
dan digunakan untuk menyatakan bahawa syarat mesti dipenuhi pada masa yang sama Kod adalah seperti berikut:
@media screen (min-width:800px) and (max-width:1200px) {
/*code*/
}Apabila skrin lebih besar daripada atau sama dengan 800px dan kurang daripada atau sama dengan 1200px, kod css yang sepadan akan digunakan.
(4).atau kata kunci:
atau digunakan untuk menyatakan bahawa selagi satu syarat dipenuhi, kodnya adalah seperti berikut:
@media screen (min-width:800px) or (orientation:portrait) {
/*code*/
}Apabila saiz skrin lebih kurang sama dengan 800px, atau orientasi adalah potret, ia akan Gunakan kod css yang sepadan.
(5).bukan kata kunci:
not digunakan untuk menyatakan bahawa ia boleh diwujudkan apabila syarat yang dinyatakan tidak dipenuhi.
@media not print{
/*code*/
}Apabila ia bukan peranti pencetak, gunakan kod css yang sepadan.
bahagian seterusnya