À quoi sert la requête multimédia bootstrap ?

Dans Bootstrap, les requêtes multimédias peuvent distinguer l'appareil utilisé en fonction de la taille de l'écran et définir différents styles. Différents styles peuvent être utilisés dans différentes conditions pour obtenir différents effets de rendu de la page sous différents appareils terminaux.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version bootsrap 3.3.7, ordinateur DELL G3

bootstrap media query utilise la taille de l'écran pour identifier l'appareil que vous utilisez

• Extra petit appareils (téléphones mobiles, moins de 768 px)

• Petits appareils (tablettes, à partir de 768 px)

• Appareils moyens (ordinateurs de bureau, à partir de 992 px)

• Grands appareils (grands ordinateurs de bureau, à partir de 1 200 px)

Les requêtes multimédias peuvent être trouvées dans différents styles. Utilisez différents styles dans différentes conditions pour obtenir différents effets de rendu sur la page sous différents terminaux. Nous avons brièvement présenté comment les media queries sont référencées dans les projets, mais les media queries ont leurs propres règles d'utilisation. Plus précisément, voici comment utiliser les requêtes multimédias.

@media 媒体类型and （媒体特性）{你的样式}

Remarque : lorsque vous utilisez des requêtes multimédias, vous devez commencer par "@media", puis spécifier le type de média (peut également être appelé type d'appareil), suivi de la spécification des caractéristiques du média (peuvent également être appelées caractéristiques de l'appareil). 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)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1. Largeur maximale max-width

"max-width" est la fonctionnalité la plus couramment utilisée parmi les propriétés multimédias. Cela signifie que lorsque le type de média est inférieur ou égal à la largeur spécifiée. le style prendra effet. Par exemple :

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

Ce qui précède signifie : lorsque l'écran est inférieur ou égal à 480px, les blocs publicitaires (.ads) dans la page seront masqués.

2. Largeur minimale min-width

"min-width" est l'opposé de "max-width", ce qui signifie que lorsque le type de média est supérieur ou égal à la largeur spécifiée, le style prendra effet. .

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

Ce qui précède signifie : lorsque l'écran est supérieur ou égal à 900px, la largeur du conteneur ".wrapper" est de 980px.

3. Utilisation de plusieurs fonctionnalités multimédias

Les requêtes multimédias peuvent utiliser le mot-clé « et » pour combiner plusieurs fonctionnalités multimédias. En d’autres termes, une requête multimédia peut contenir de 0 à plusieurs expressions, et l’expression peut contenir de 0 à plusieurs mots-clés, ainsi qu’un type de média.

Lorsque l'écran est compris entre 600 et 900 pixels, la couleur d'arrière-plan du corps est rendue comme "#f5f5f5", comme indiqué ci-dessous.

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

4. La largeur de sortie de l'écran de l'appareil Largeur de l'appareil

Sur les appareils intelligents, tels que l'iPhone, l'iPad, etc., vous pouvez également définir le style correspondant (ou appeler le fichier de style correspondant) en fonction de la taille. du dispositif à écran. De même, pour les appareils à écran, vous pouvez également utiliser les paramètres correspondants « min/max », tels que « min-device-width » ou « max-device-width ».

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

Le code ci-dessus fait référence au style "iphone.css" qui convient à la largeur maximale de l'appareil de 480 pixels, comme l'affichage sur l'iPhone. La "largeur maximale de l'appareil" fait ici référence à la résolution réelle de l'iPhone. appareil, il fait également référence à la résolution de la zone visuelle.

5. Mot-clé Not

L'utilisation du mot-clé "not" est utilisée pour exclure un certain type de média spécifié, c'est-à-dire qu'il est utilisé pour exclure les appareils qui correspondent à l'expression. En d'autres termes, le mot-clé not signifie effectuer l'opération d'inversion sur l'expression suivante, telle que :

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

Le code ci-dessus indique que le code de style sera utilisé dans tous les appareils à l'exception des appareils d'impression et des largeurs d'appareil inférieures à 1 200 px.

6. Le seul mot-clé

only est utilisé pour spécifier un type de média spécifique et peut être utilisé pour exclure les navigateurs qui ne prennent pas en charge les requêtes multimédias. En fait, seul est souvent utilisé pour masquer les feuilles de style pour les appareils qui ne prennent pas en charge Media Query mais prennent en charge Media Type. Les principaux sont : pour les appareils prenant en charge les fonctionnalités multimédias, si le style est appelé normalement, alors il sera traité comme s'il n'existait pas ; pour les appareils qui ne prennent pas en charge les fonctionnalités multimédias mais prennent en charge les types de médias, le style ne sera pas lu ; car il lira d'abord uniquement, puis ne filtrera pas ; de plus, les navigateurs qui ne prennent pas en charge les requêtes multimédias, qu'ils les prennent en charge uniquement, le style ne sera pas adopté. Par exemple,

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

Si le type de média n'est pas explicitement spécifié dans Media Query, sa valeur par défaut est all, par exemple :

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

De plus, dans le style, vous pouvez également utiliser plusieurs instructions pour appliquer le même style à différents médias. types et supports Dans les propriétés, la méthode de spécification est la suivante.

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

Le style style.css dans le code ci-dessus est utilisé sur les appareils portables d'une largeur inférieure ou égale à 480 px, ou sur les appareils avec une largeur d'écran supérieure ou égale à 960 px.

Jusqu'à présent, les requêtes multimédias CSS3 sont prises en charge par de nombreux navigateurs et sont parfaitement prises en charge dans tous les navigateurs modernes à l'exception des navigateurs IE6-8. Une autre différence est que les requêtes multimédias n'ont pas besoin d'être préfixées dans différents navigateurs comme les autres propriétés CSS3.

【Recommandation associée : "Tutoriel bootstrap"】

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!