masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pertanyaan multimedia CSS3

Pertanyaan multimedia CSS3

Jenis multimedia CSS2

Peraturan @media diperkenalkan dalam CSS2 dan peraturan gaya yang berbeza boleh disesuaikan untuk jenis media yang berbeza.

Contohnya: anda boleh menetapkan peraturan gaya yang berbeza untuk jenis media yang berbeza (termasuk monitor, peranti mudah alih, TV, dsb.).

Tetapi jenis multimedia ini tidak cukup mesra untuk menyokong pada banyak peranti.

Pertanyaan Multimedia CSS3

Pertanyaan multimedia CSS3 mewarisi semua idea jenis multimedia CSS2: daripada mencari jenis peranti, paparan penyesuaian CSS3 mengikut tetapan.

Pertanyaan media boleh digunakan untuk mengesan banyak perkara, seperti:

lebar port pandangan dan ketinggian peranti lebar dan orientasi ketinggian (landskap telefon pintar, potret). Resolusi

Pada masa ini, banyak peranti seperti telefon Apple, telefon Android, tablet, dll. menggunakan pertanyaan multimedia.

Sintaks pertanyaan multimedia

Pertanyaan multimedia terdiri daripada pelbagai media dan boleh mengandungi satu atau lebih ungkapan berdasarkan sama ada keadaan adalah benar.

@media bukan|hanya jenis media dan (ungkapan) {
Kod CSS;
}

Jika jenis multimedia yang ditentukan sepadan dengan jenis peranti, hasil pertanyaan returns true , dokumen akan memaparkan kesan gaya yang ditentukan pada peranti yang sepadan.

Melainkan anda menggunakan pengendali bukan atau sahaja, semua gaya akan disesuaikan untuk dipaparkan pada semua peranti.

bukan: tidak digunakan untuk mengecualikan peranti tertentu tertentu, seperti @media tidak cetak (peranti bukan pencetak).

sahaja: digunakan untuk menentukan jenis media tertentu. Untuk peranti mudah alih yang menyokong Pertanyaan Media, jika satu-satunya kata kunci wujud, penyemak imbas web peranti mudah alih akan mengabaikan satu-satunya kata kunci dan terus menggunakan fail gaya berdasarkan ungkapan berikut. Untuk peranti yang tidak menyokong Pertanyaan Media tetapi mampu membaca pelayar web Jenis Media, fail gaya ini akan diabaikan apabila satu-satunya kata kunci ditemui.

semua: Semua peranti, ini harus dilihat dengan kerap.

Anda juga boleh menggunakan fail gaya berbeza pada media berbeza:

jenis multimedia CSS3

  

ucapan untuk pembaca skrin


Contoh mudah pertanyaan multimedia

Menggunakan pertanyaan multimedia boleh digunakan pada peranti tertentu gaya menggantikan gaya asal.

Dalam contoh berikut, warna latar belakang diubah suai pada peranti dengan saiz tetingkap boleh lihat skrin lebih besar daripada 480 piksel: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body {
    background-color: pink;
}
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>
</head>
<body>
<h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>
</body>
</html>

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <style> .wrapper {overflow:auto;} #main {margin-left: 4px;} #leftsidebar {float: none;width: auto;} #menulist {margin:0;padding:0;} .menuitem { background:#CDF0F6; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:4px; padding:2px; } @media screen and (min-width: 480px) { #leftsidebar {width:200px;float:left;} #main {margin-left:216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">Menu-item 1</li> <li class="menuitem">Menu-item 2</li> <li class="menuitem">Menu-item 3</li> <li class="menuitem">Menu-item 4</li> <li class="menuitem">Menu-item 5</li> </ul> </div> <div id="main"> <h1>重置浏览器窗口查看效果！</h1> <p>在屏幕可视窗口尺寸小于 480 像素时将菜单浮动到页面左侧。</p> </div> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492413 permainan