Qu'est-ce que l'instruction de requête multimédia HTML5 ?

L'instruction de requête multimédia HTML5 est composée d'un type de média et d'une ou plusieurs expressions conditionnelles pour détecter les caractéristiques du média ; les caractéristiques du média qui peuvent être utilisées pour la détection dans les requêtes multimédia incluent la largeur, la hauteur, la couleur, etc. ; peut changer la page sans changer le Dans le cas du contenu, l'effet d'affichage est personnalisé pour des périphériques de sortie spécifiques.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur DELL G3

Qu'est-ce que l'instruction de requête média html5 ?

Requêtes média HTML5

Requêtes média

- Que sont les requêtes média ?

Les requêtes multimédias nous permettent de définir des styles CSS en fonction des caractéristiques de l'affichage de l'appareil (telles que la largeur de la fenêtre d'affichage, le rapport de l'écran, l'orientation de l'appareil : paysage ou portrait). Les requêtes multimédias comprennent des types de médias et une ou plusieurs conditions de détection des caractéristiques des médias. .Composition d'expressions. Les propriétés multimédias qui peuvent être détectées dans les requêtes multimédias sont width , height et color (etc.). À l'aide des requêtes multimédias, vous pouvez personnaliser l'effet d'affichage pour des périphériques de sortie spécifiques sans modifier le contenu de la page.

- Applicabilité des requêtes multimédias et disposition flexible des boîtes

Requêtes multimédias : il est préférable d'utiliser des requêtes multimédias lorsque la structure de la page change. Boîte flexible : si seules la largeur et la hauteur changent, essayez d'utiliser la boîte flexible

-Méthode d'utilisation

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(min-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .class {
    display: none;
  }
}
</style>

@media type de média et (caractéristiques du média) {votre style}

L'utilisation des requêtes média doit commencer par "@media" , Spécifiez ensuite le type de média (également appelé type de périphérique), suivi des caractéristiques du média spécifiées (également appelées caractéristiques de périphérique). La méthode d'écriture des propriétés du média est très similaire à la méthode d'écriture des styles. Elle est principalement divisée en deux parties. La première partie fait référence aux propriétés du média, et la deuxième partie est la valeur spécifiée par les propriétés du média, et les deux points sont. utilisé entre les deux parties. Par exemple :

(max-width: 480px)

Différentes des attributs CSS, les propriétés multimédias utilisent min/max pour représenter supérieur à égal ou inférieur à comme jugement logique, au lieu d'utiliser des symboles tels que inférieur à (<) et supérieur à (>) juger.

- type de média

tous	tous les médias (par défaut)
écran	écran couleur
print	Aperçu avant impression

-Attribut média

largeur	(le préfixe maximum et min peut être ajouté)
hauteur	(un préfixe max min peut être ajouté)
largeur de l'appareil	(peut ajouter un préfixe max min)
orientation	écran vertical portrait/écran horizontal paysage

- 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

@media screen and (max-width:580px){
 body {
   background-color: red;
  }
}

上面表示的是：当屏幕小于或等于580px时,页面的背景颜色变为红色。

- 最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){
  .wrapper{width: 980px;}
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

- 多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。  当屏幕在600px~900px之间时，body的背景色渲染为“blue”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:blue;}
}

- 设备屏幕的输出宽度Device Width

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

-逗号分隔列表

当使用媒体查询的逗号分隔列表时，如果列表中的任何媒体查询为true，样式表都会被运用。在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的。

例如，如果你想应用一套样式在宽度大于等于700px的设备上，或者采用横向模式的便捷式设备上，你可以这样：

@media (min-width: 700px),handheld and (orientation: landscape) { ... }

如果我使用的设备的屏幕宽度大于700px，媒体查询将返回true，样式将被运用。如果我使用的是横向的便捷式设备，第一个媒体查询返回false，但第二个媒体查询将返回true，样式仍将被使用。

- not关键词

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

- only关键词

only操作符表示仅在媒体查询匹配成功时应用指定样式。  可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略

- 在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

-在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。

<link rel="stylesheet" type="text/css" href="style.css" media="print and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的打印预览上，或者被用于屏幕宽度大于或等于960px的设备上。

推荐学习：《HTML5视频教程》

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!