Quels sont les mots-clés de syntaxe pour les requêtes multimédias CSS3

Le mot-clé de syntaxe de la requête multimédia CSS3 est « @media », qui permet de définir différentes conditions multimédias pour la page et d'appliquer les styles correspondants en fonction des conditions ; le format de syntaxe de base est « @media mediatype et |not|only(media feature) ) {Code CSS ;}".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Media Queries est un nouveau concept proposé en CSS3, qui permet de définir différentes conditions multimédias pour la page et d'appliquer les styles correspondants en fonction des conditions.

Le mot-clé de syntaxe de la requête multimédia CSS3 est "@media".

@media peut définir différents styles pour différentes tailles d'écran, surtout si vous devez configurer une page réactive, @media est très utile.

Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur.

Syntaxe :

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

seulement est utilisé pour limiter l'intégralité du résultat de la requête, et non pour annuler l'intégralité du résultat de la requête. Si vous n'utilisez pas ou uniquement les mots-clés, un type de média doit être explicitement spécifié et le mot-clé doit figurer au début de l'intégralité de l'instruction de requête multimédia.

1) et

Le mot-clé et est utilisé pour combiner des expressions de types de médias et plusieurs caractéristiques de médias dans la même requête multimédia. Le résultat de la requête est vrai uniquement si le type de média et le résultat de chaque expression sont vrais. Par exemple :

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

Le résultat de la requête multimédia est une valeur booléenne : soit vrai, soit faux. Ce n'est que lorsque toutes les parties de la connexion et sont vraies que le résultat de l'intégralité de l'instruction media query est vrai.

Les requêtes média peuvent également être considérées comme des questions adressées au navigateur. La requête multimédia ci-dessus demandera d'abord « Êtes-vous un moniteur ? ». Si le navigateur répond « Oui », il continuera à demander « Votre largeur minimale est-elle de 700 pixels ? » Si le navigateur répond « Oui », il continuera à demander. demandez "Votre écran est-il en orientation paysage ?" Ce n'est que lorsque les réponses aux trois questions sont « oui » que le résultat de l'ensemble de la requête médiatique sera vrai.

2) uniquement

Le mot-clé uniquement est utilisé pour limiter la portée, et il s'appliquera à l'ensemble des résultats de la requête. Par exemple :

only screen and (color)

n'est valable que pour les appareils à écran couleur et non pour les autres appareils. C'est équivalent à :

not (screen and (color))

3) not

Le mot-clé not est utilisé pour annuler l'intégralité du résultat de la requête. Par exemple :

not (screen and (monochrome))

désigne tous les appareils à l'exception des appareils à affichage monochrome. C'est équivalent à :

not (screen and (monochrome))

au lieu de :

(not screen) and (monochrome)

En plus d'une requête unique, il est également possible de définir une liste de requêtes média séparées par des virgules. Si le résultat d’une requête multimédia dans la liste est vrai, le résultat de la liste de requêtes multimédia est vrai ; sinon, le résultat de la liste de requêtes multimédia est faux ;

Chaque requête de la liste de requêtes multimédias est indépendante les unes des autres et les opérateurs d'une requête n'affectent pas les autres requêtes multimédias. Par conséquent, les listes de requêtes multimédias peuvent fonctionner sur différents types de médias et propriétés de médias. Par exemple :

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

La liste de requêtes multimédias ci-dessus contient deux requêtes multimédias. Pour tout appareil d'une largeur minimale de 700 pixels, ou un appareil portable avec un écran horizontal, le résultat de la liste de requêtes multimédias est vrai, et dans les autres cas. , c'est faux.

Avec les requêtes multimédias, vous pouvez les utiliser pour créer des mises en page réactives. Il existe deux manières d'utiliser les requêtes multimédias : l'une consiste à utiliser la règle @media pour choisir de charger différents codes CSS ; l'autre consiste à utiliser l'attribut media de la balise

Définir des requêtes multimédias

1) Utilisez les règles @media

Utilisez les règles @media pour définir différents styles en fonction de différentes conditions multimédias dans le même fichier CSS. Lorsqu'un utilisateur parcourt une page Web, le navigateur choisit quel morceau de code CSS appliquer en fonction des résultats de la requête multimédia.

La syntaxe de la règle @media est après @media, suivie du type de média et des caractéristiques du média, puis d'une paire d'accolades, dans lesquelles les règles de style correspondantes sont définies. Par exemple :

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

Selon la nature en cascade des styles, le style défini plus tard dans la feuille de style écrasera le même style précédemment. Par conséquent, vous pouvez définir des styles de base au début de la feuille de style pour vous adapter à toutes les conceptions, puis utiliser des requêtes multimédias pour réécrire les parties correspondantes afin que différentes conditions multimédias appliquent des règles de style différentes.

2) Utilisation de l'attribut media de la balise

Lors de l'utilisation de l'attribut media de la balise , différents fichiers de feuille de style sont définis pour différentes conditions multimédias, et le navigateur, en fonction de les résultats de la requête multimédia, Chargez différents fichiers de feuilles de style.

<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">

Trois fichiers de feuille de style reset.css, phone.css et screen.css sont définis ici, et tous les appareils d'affichage sont autorisés à charger reset.css, et les appareils d'affichage avec une largeur de fenêtre inférieure à 480 px sont autorisés à charger le téléphone. .css , laissez screen.css être chargé sur les appareils d'affichage avec une largeur de fenêtre supérieure à 768 pixels.

On voit qu'en utilisant la première méthode, vous devez écrire @media plusieurs fois dans le même fichier CSS ; en utilisant la deuxième méthode, vous devez écrire plusieurs fois la balise Les deux méthodes ont le même effet, vous pouvez choisir la méthode que vous aimez.

事实上，还可以是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视频教程）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!