Guide du débutant pour les requêtes multimédias
10 08 2022
CSS Media Query vous permet d'appliquer CSS uniquement lorsque l'environnement du navigateur et de l'appareil correspond à une règle que vous spécifiez, par exemple "la fenêtre d'affichage est plus large que 480 pixels". Les requêtes multimédias sont un élément clé de la conception Web réactive, car elles vous permettent de créer différentes mises en page en fonction de la taille de la fenêtre d'affichage, mais elles peuvent également être utilisées pour détecter d'autres éléments concernant l'environnement dans lequel votre site s'exécute, par exemple si le l'utilisateur utilise un écran tactile plutôt qu'une souris. Dans cette leçon, vous apprendrez d'abord la syntaxe utilisée dans les requêtes multimédias, puis vous les utiliserez dans un exemple concret montrant comment une conception simple peut être rendue réactive.
Règles des fonctionnalités multimédias Après avoir spécifié le type, vous pouvez ensuite cibler une fonctionnalité multimédia avec une règle. Largeur et hauteur La fonctionnalité que nous avons tendance à détecter le plus souvent afin de créer des conceptions réactives (et qui est largement prise en charge par les navigateurs) est la largeur de la fenêtre d'affichage, et nous pouvons appliquer CSS si la fenêtre d'affichage est supérieure ou inférieure à une certaine largeur - ou une largeur exacte - en utilisant le min -largeur, largeur maximale et largeur des fonctionnalités multimédias. Ces fonctionnalités sont utilisées pour créer des mises en page qui répondent à différentes tailles d'écran. Par exemple, pour changer la couleur du corps du texte en rouge si la fenêtre d'affichage est exactement de 600 pixels, vous utiliserez la requête multimédia suivante.
Les media queries font partie des nouveautés de CSS3. Il ne s'agit pas de nouvelles propriétés mais de règles que l'on peut appliquer dans certaines conditions. Concrètement, vous allez pouvoir dire « Si la résolution de l'écran du visiteur est inférieure à tant, alors applique les propriétés CSS suivantes ». Cela vous permet de changer l'apparence du site dans certaines conditions : vous pourrez augmenter la taille du texte, changer la couleur de fond, positionner différemment votre menu dans certaines résolutions, etc. Contrairement à ce qu'on pourrait penser, les media queries ne concernent pas que les résolutions d'écran. Vous pouvez changer l'apparence de votre site en fonction d'autres critères comme le type d'écran (smartphone, télévision, projecteur…), le nombre de couleurs, l'orientation de l'écran (portrait ou paysage), etc. Les possibilités sont très nombreuses !