À quoi servent les requêtes multimédias CSS ?

Le rôle de la requête multimédia CSS : La requête multimédia nous permet de définir des styles CSS pour l'affichage de l'appareil en fonction des caractéristiques de l'affichage de l'appareil, telles que la largeur de la fenêtre, le rapport de l'écran, l'orientation de l'appareil, etc. La requête multimédia se compose du type de média et d'un ou Il se compose de plusieurs expressions conditionnelles pour détecter les caractéristiques du média.

L'environnement d'exploitation de ce tutoriel : Système Windows 10, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Le rôle de la requête multimédia CSS :

1. media Query

Les requêtes média nous permettent de définir des styles CSS pour l'affichage de l'appareil en fonction de ses caractéristiques (telles que la largeur de la fenêtre, le rapport de l'écran, l'orientation de l'appareil : paysage ou portrait). un ou plusieurs Composé d'expressions conditionnelles pour détecter les caractéristiques du média. 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.

2. Comment introduire les requêtes multimédias dans les fichiers CSS

Les requêtes multimédias sont écrites à la fin du code de style CSS CSS est une feuille de style en cascade. Sous la même particularité, les styles ultérieurs. chevauchera le style précédent.

3. Comment utiliser les médias

Vous devez ajouter le code suivant au document html pour être compatible avec l'effet d'affichage des appareils mobiles

<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

ps :

width =device-width : largeur égale à la largeur de l'appareil actuel

initial-scale=1 : rapport de mise à l'échelle initial (la valeur par défaut est 1)

maximum-scale=1 : permet à l'utilisateur de zoomer à l'échelle maximale (la valeur par défaut est 1)

user-scalable=no : les utilisateurs ne peuvent pas mettre à l'échelle manuellement

4 Comment écrire des requêtes multimédias réactives CSS dans des fichiers CSS <.>

Exemple :

@media screen and (max-width:720px) and (min-width:320px){
      body{
       background-color:red;
       }
@media screen and (max-width:320px){
      body{
         background-color:blue;
       }
}

ps :

La signification de cette requête multimédia est : lorsque la largeur de l'écran de l'appareil est comprise entre 320 px et 720 px, la couleur d'arrière-plan du corps dans le média requête (couleur d'arrière-plan : rouge ;) Elle chevauchera la couleur d'arrière-plan du corps précédent. Lorsque la largeur de l'écran de l'appareil est inférieure à 320 px, la couleur d'arrière-plan du corps (couleur d'arrière-plan : bleu ;) du corps de la requête multimédia chevauchera la précédente. couleur de fond du corps.

Recommandations associées :

Tutoriel 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!