masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pertanyaan multimedia CSS3

Pertanyaan multimedia CSS3 mewarisi semua idea jenis multimedia CSS2: bukannya mencari jenis peranti, CSS3 memaparkan secara adaptif mengikut tetapan.

Pertanyaan media boleh digunakan untuk mengesan banyak perkara, seperti:

lebar dan ketinggian port pandangan(port pandangan)

lebar dan ketinggian peranti

orientasi ( skrin mendatar telefon bimbit pintar, skrin menegak).

Resolusi

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

Sintaks pertanyaan multimedia

Pertanyaan multimedia terdiri daripada pelbagai media dan boleh mengandungi satu atau lebih ungkapan ungkapan mengembalikan benar atau salah bergantung pada sama ada keadaan itu benar.

@media bukan|sahaja jenis media dan (ungkapan) {

Kod CSS ;

}

Jika jenis multimedia yang ditentukan sepadan dengan jenis peranti, hasil pertanyaan akan kembali benar dan dokumen akan memaparkan gaya yang ditentukan pada Kesan 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.

Instance 1: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
 /*    小于200px*/   
        @media only screen and (max-width:200px ) {   
            #p{   
                background: red;   
            }   
        }   
/*    大于300px*/   
        @media only screen and (min-width:300px ) {   
            #p{   
                background: yellow;   
            }   
        }   
</style>
</head>
<body>
  <p id="p">小于200px背景变红色大于300px背景为黄色</p> 
</body>
</html>

Instance 2:

rreee
Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>php.cn</title> <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:14px; padding:12px; } @media screen and (min-width: 300px) { #leftsidebar {width:200px;float:right;} #main {margin-left:216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">php</li> <li class="menuitem">js</li> <li class="menuitem">css</li> <li class="menuitem">html</li> <li class="menuitem">ios</li> </ul> </div> <div id="main"> <p>在屏幕可视窗口尺寸小于 300 像素时将菜单浮动到页面右侧。</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)  492836 permainan