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: bukannya mencari jenis peranti, berasaskan CSS3 pada tetapan Paparan adaptif.
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 pada Mengembalikan benar atau salah 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 kembali benar, dan 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: bukan digunakan untuk mengecualikan peranti tertentu tertentu, seperti @media bukan 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
| 值 | 描述 |
|---|---|
| all | 用于所有多媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器 |
Contoh mudah pertanyaan multimedia
Gunakan pertanyaan multimedia untuk menggantikan gaya asal dengan gaya yang sepadan pada peranti yang ditentukan.
Dalam contoh berikut, warna latar belakang diubah suai pada peranti dengan saiz tetingkap boleh dilihat skrin lebih besar daripada 480 piksel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<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>Jalankan atur cara dan cuba
Contoh berikut tersedia pada skrin Terapungkan menu ke sebelah kiri halaman apabila saiz port pandangan lebih besar daripada 480 piksel:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php中文网(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: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>Jalankan program untuk mencubanya
