Apakah kata kunci sintaks untuk pertanyaan media css3

Kata kunci sintaks pertanyaan media css3 ialah "@media", yang membenarkan menetapkan syarat media yang berbeza untuk halaman dan menggunakan gaya yang sepadan mengikut syarat-syarat format sintaks asas ialah "@mediatype dan|bukan| sahaja(ciri media) {CSS-Code;}".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Pertanyaan Media ialah konsep baharu yang dicadangkan dalam CSS3, yang membenarkan menetapkan syarat media yang berbeza untuk halaman dan menggunakan gaya yang sepadan berdasarkan syarat.

Kata kunci sintaks pertanyaan media css3 ialah "@media".

@media boleh menetapkan gaya yang berbeza untuk saiz skrin yang berbeza, terutamanya jika anda perlu menyediakan halaman responsif, @media sangat berguna.

Apabila anda menetapkan semula saiz penyemak imbas, halaman itu juga akan dipaparkan semula berdasarkan lebar dan ketinggian penyemak imbas.

Sintaks:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

hanya digunakan untuk mengehadkan keseluruhan hasil pertanyaan, bukan digunakan untuk menafikan keseluruhan hasil pertanyaan. Jika anda menggunakan kata kunci bukan atau sahaja, jenis media mesti dinyatakan secara eksplisit dan kata kunci mestilah pada permulaan keseluruhan pernyataan pertanyaan media.

1) dan

Kata kunci dan digunakan untuk menggabungkan ungkapan jenis media dan ciri berbilang media ke dalam pertanyaan media yang sama. Hasil pertanyaan adalah benar hanya jika jenis media dan hasil setiap ungkapan adalah benar. Contohnya:

screen and (min-width: 700px) and (orientation: landscape)

Hasil pertanyaan media ialah nilai Boolean: sama ada benar atau palsu. Hanya apabila semua bahagian dan sambungan adalah benar, keputusan keseluruhan pernyataan pertanyaan media adalah benar.

Pertanyaan media juga boleh dianggap sebagai soalan kepada penyemak imbas. Pertanyaan media di atas terlebih dahulu akan bertanya "Adakah anda seorang monitor?" Jika pelayar menjawab "Ya", ia akan terus bertanya "Adakah lebar minimum anda 700 piksel?" tanya " Adakah skrin anda dalam orientasi landskap?" Hanya apabila jawapan kepada ketiga-tiga soalan adalah "ya", keputusan keseluruhan pernyataan pertanyaan media akan menjadi benar.

2) sahaja

Kata kunci sahaja digunakan untuk mengehadkan skop, yang akan digunakan pada keseluruhan hasil pertanyaan. Contohnya:

only screen and (color)

hanya sah untuk peranti paparan berwarna dan bukan untuk mana-mana peranti lain. Ia bersamaan dengan:

not (screen and (color))

3) bukan

Kata kunci not digunakan untuk menafikan keseluruhan hasil pertanyaan. Contohnya:

not (screen and (monochrome))

bermaksud semua peranti kecuali peranti paparan monokrom. Ia bersamaan dengan:

not (screen and (monochrome))

dan bukannya:

(not screen) and (monochrome)

Sebagai tambahan kepada satu pertanyaan, anda juga boleh mentakrifkan senarai pertanyaan media, dipisahkan dengan koma. Jika keputusan sebarang pertanyaan media dalam senarai adalah benar, hasil senarai pertanyaan media adalah benar jika tidak, hasil senarai pertanyaan media adalah palsu.

Setiap pertanyaan dalam senarai pertanyaan media adalah bebas antara satu sama lain, dan pengendali dalam satu pertanyaan tidak menjejaskan pertanyaan media lain. Oleh itu, senarai pertanyaan media boleh beroperasi pada jenis media dan atribut media yang berbeza. Contohnya:

(min-width: 700px), handheld and (orientation: landscape)

Senarai pertanyaan media di atas mengandungi dua pertanyaan media Untuk mana-mana peranti dengan lebar minimum 700 piksel, atau peranti pegang tangan dengan skrin mendatar, hasil senarai pertanyaan media ialah. benar. Dalam kes lain, adalah palsu.

Dengan pertanyaan media, anda boleh menggunakannya untuk membina reka letak responsif. Terdapat dua cara untuk menggunakan pertanyaan media: satu ialah menggunakan peraturan @media untuk memilih untuk memuatkan kod CSS yang berbeza dengan menggunakan atribut media bagi teg

Tetapkan pertanyaan media

1) Gunakan peraturan @media

Gunakan peraturan @media, Dalam fail CSS yang sama, tentukan gaya yang berbeza mengikut keadaan media yang berbeza. Apabila pengguna menyemak imbas halaman web, penyemak imbas akan memilih sekeping kod CSS untuk digunakan berdasarkan hasil pertanyaan media.

Sintaks peraturan @media adalah selepas @media, diikuti oleh jenis media dan atribut media, dan kemudian sepasang pendakap, di mana peraturan gaya yang sepadan ditentukan. Contohnya:

@media screen and (max-device-width: 480px) { 
 /* 如果设备宽度 <= 480px，将会应用这里的 CSS 代码 */
}
@media screen and (max-width: 768px) { 
 /* 如果视口宽度 <= 768px，将会应用这里的 CSS 代码 */
}

Mengikut sifat gaya melata, gaya yang ditakrifkan kemudian dalam helaian gaya akan menimpa gaya yang sama dalam gaya sebelumnya. Oleh itu, anda boleh menentukan gaya asas pada permulaan helaian gaya untuk menyesuaikan diri dengan semua reka bentuk, dan kemudian gunakan pertanyaan media untuk menulis semula bahagian yang sepadan supaya keadaan media yang berbeza menggunakan peraturan gaya yang berbeza.

2) Gunakan atribut media bagi teg

Apabila menggunakan atribut media bagi teg syarat fail jadual, penyemak imbas akan memuatkan fail helaian gaya yang berbeza berdasarkan hasil pertanyaan media.

<link rel="stylesheet" media="screen" href="reset.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="phone.css">
<link rel="stylesheet" media="screen and (min-width: 768px)" href="screen.css">

Tiga fail helaian gaya reset.css, phone.css dan screen.css ditakrifkan di sini dan reset.css dimuatkan pada semua peranti paparan untuk membenarkan lebar port pandangan kurang daripada 480px. Peranti skrin memuatkan phone.css dan peranti paparan dengan lebar port pandangan lebih daripada 768px memuatkan screen.css.

Ia boleh dilihat bahawa menggunakan kaedah pertama, anda perlu menulis @media beberapa kali dalam fail CSS yang sama menggunakan kaedah kedua, anda perlu menulis tag Kedua-dua kaedah mempunyai kesan yang sama, anda boleh memilih kaedah yang anda suka.

事实上，还可以是CSS的 @import 指令按条件引入其他样式表。如，以下代码对给视口最大宽度为 360px 的显示屏设备加载一个名为 small.css 的样式表文件。

@import url("small.css") screen and (max-width: 360px);

但是，使用CSS的 @import 方式会增加HTTP请求，这会影响页面的加载速度，因此并不推荐使用这种方法。

在媒体查询中，把设备宽度的临界点称作断点，并把媒体特性 min-width 和 max-width 对应的属性值称作断点值。

综上所述，媒体查询就是使用断点来创建媒体查询的条件，并为每个断点调用一个样式表文件（或样式代码），来实现在不改变页面内容的情况下，为不同的设备及不同尺寸的设备定制显示效果。

说明：让IE6~8支持媒体查询

虽然媒体查询已经被广泛使用，并得到所有现代浏览器的支持，但IE 9以下的老版本浏览器却不支持它。可以选择给老版本的IE添加垫片脚本，让它们支持媒体查询功能。

respond.js（https://github.com/scottjehl/Respond）是一个快速、轻量的 Javascript 工具，它会遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，监控浏览器宽度的变化，并添加或删除与媒体查询匹配的样式，使原本不支持媒体查询的IE6-8 支持媒体查询的 min-width 和 max-width 特性。

respond.js的使用非常简单，只需在页面所有的CSS之后，使用IE条件注释，让IE6-8版本加载 respond.js 脚本即可：

<!--[if lt IE 9]>
<script  src="respond.js "></script>
<![endif]-->

但需要注意，respond.js 无法解析CSS的@import指令。因此，建议在已有的样式表中追加媒体查询的样式。如，在样式表文件中，使用 min-width 或 max-width 定义媒体查询：

@media screen and (max-width: 480px) {undefined
    // 针对视口宽度小于 480px 的显示屏设备定义样式
}

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci Apakah kata kunci sintaks untuk pertanyaan media css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!