Apakah yang dilakukan oleh pertanyaan media bootstrap?

Dalam Bootstrap, pertanyaan media boleh mengenal pasti peranti yang digunakan oleh saiz skrin dan menetapkan gaya yang berbeza boleh digunakan dalam keadaan yang berbeza untuk mencapai pemaparan halaman yang berbeza di bawah Kesan terminal yang berbeza.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

pertanyaan media bootstrap membezakan anda dengan saiz skrin Peranti yang digunakan

• Peranti kecil tambahan (telefon, kurang daripada 768px)

• Peranti kecil (tablet, daripada 768px)

• Peranti sederhana (desktop, bermula pada 992px)

• Peranti besar (desktop besar, bermula pada 1200px)

Pertanyaan media boleh menggunakan gaya yang berbeza dalam keadaan yang berbeza, supaya halaman boleh mencapai kesan pemaparan yang berbeza di bawah peranti terminal yang berbeza. Sebelum ini, kami secara ringkas memperkenalkan cara pertanyaan media dirujuk ke dalam projek, tetapi pertanyaan media mempunyai peraturan penggunaannya sendiri. Khususnya, berikut ialah cara menggunakan pertanyaan media.

@media 媒体类型and （媒体特性）{你的样式}

Nota: Untuk menggunakan pertanyaan media, anda mesti bermula dengan "@media", kemudian nyatakan jenis media (juga boleh dipanggil jenis peranti), diikuti dengan menentukan ciri media (boleh juga dipanggil peranti ciri-ciri). Kaedah penulisan sifat media sangat serupa dengan kaedah penulisan gaya Ia terutamanya dibahagikan kepada dua bahagian Bahagian pertama merujuk kepada sifat media, dan bahagian kedua ialah nilai yang ditentukan oleh sifat media, dan titik bertindih digunakan di antara dua bahagian. Contohnya:

(max-width: 480px)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1. Lebar maksimum lebar maksimum

"lebar maksimum" ialah ciri yang paling biasa digunakan antara ciri media, yang bermaksud media. Gaya berkuat kuasa apabila jenis kurang daripada atau sama dengan lebar yang ditentukan. Contohnya:

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

Perkara di atas bermaksud: apabila skrin kurang daripada atau sama dengan 480px, blok pengiklanan (.ads) dalam halaman akan disembunyikan.

2. Lebar minimum min-width

"min-width" ialah bertentangan dengan "max-width", yang bermaksud apabila jenis media lebih besar daripada atau sama dengan lebar yang ditentukan, Gaya berkuat kuasa.

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

Perkara di atas bermaksud: apabila skrin lebih besar daripada atau sama dengan 900px, lebar bekas ".wrapper" ialah 980px.

3. Penggunaan berbilang ciri media

Pertanyaan Media boleh menggunakan kata kunci "dan" untuk menggabungkan berbilang ciri media bersama-sama. Dalam erti kata lain, Pertanyaan Media boleh mengandungi 0 kepada lebih banyak ungkapan, dan ungkapan itu boleh mengandungi 0 kepada lebih banyak kata kunci, serta jenis media.

Apabila skrin antara 600px~900px, warna latar belakang badan dipaparkan sebagai "#f5f5f5", seperti yang ditunjukkan di bawah.

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4 Lebar output skrin peranti Lebar Peranti

Pada peranti pintar, seperti iPhone, iPad, dll., ia juga boleh ditetapkan mengikut saiz peranti skrin Gaya yang sepadan (atau panggil fail gaya yang sepadan). Begitu juga, untuk peranti skrin, anda juga boleh menggunakan parameter sepadan "min/maks", seperti "lebar-peranti-min" atau "lebar-peranti-maks".

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

Kod di atas merujuk kepada gaya "iphone.css" yang sesuai untuk lebar peranti maksimum 480px, seperti paparan pada iPhone "lebar peranti maksimum" di sini merujuk ke peranti Resolusi sebenar, iaitu, resolusi kawasan yang boleh dilihat.

5 bukan kata kunci

Menggunakan kata kunci "bukan" digunakan untuk mengecualikan jenis media tertentu, iaitu, untuk mengecualikan peranti yang sepadan dengan ungkapan . Dalam erti kata lain, kata kunci bukan bermaksud melaksanakan operasi penyongsangan pada ungkapan berikut, seperti:

@media not print and (max-width: 1200px){样式代码}

Kod di atas menunjukkan bahawa kod gaya akan digunakan kecuali untuk peranti pencetak dan lebar peranti ialah kurang daripada 1200px dalam semua peranti.

6. Satu-satunya kata kunci

hanya digunakan untuk menentukan jenis media tertentu dan boleh digunakan untuk mengecualikan penyemak imbas yang tidak menyokong pertanyaan media. Malah, hanya sering digunakan untuk menyembunyikan helaian gaya untuk peranti yang tidak menyokong Pertanyaan Media tetapi menyokong Jenis Media. Yang utama ialah: untuk peranti yang menyokong ciri media, jika gaya dipanggil secara normal, maka ia akan dianggap seolah-olah tidak wujud; untuk peranti yang tidak menyokong ciri media tetapi menyokong jenis media, gaya tidak akan dibaca kerana ia akan membaca sahaja dahulu dan kemudian Bukan skrin di samping itu, penyemak imbas yang tidak menyokong Pertanyaan Media, tidak kira sama ada mereka menyokong sahaja, gaya tidak akan diterima pakai. Contohnya,

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

Jika Jenis Media tidak dinyatakan secara eksplisit dalam Media Query, lalainya ialah semua, seperti:

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

Selain itu, dalam gaya, anda boleh juga menggunakan berbilang kenyataan untuk Menggunakan gaya yang sama pada jenis media dan sifat media yang berbeza, dinyatakan seperti berikut.

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

Gaya style.css dalam kod di atas digunakan pada peranti pegang tangan dengan lebar kurang daripada atau sama dengan 480px atau pada peranti dengan lebar skrin lebih besar daripada atau sama dengan 960px.

Setakat ini, pertanyaan media CSS3 disokong oleh banyak penyemak imbas, dan disokong dengan sempurna dalam semua penyemak imbas moden kecuali pelayar IE6-8. Perbezaan lain ialah pertanyaan media tidak perlu diberi awalan dalam pelayar yang berbeza seperti sifat CSS3 yang lain.

[Cadangan berkaitan: "tutorial bootstrap"]

Atas ialah kandungan terperinci Apakah yang dilakukan oleh pertanyaan media bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!