Que sont les requêtes multimédias en CSS ? Comment utiliser ?

Cet article présente qu'est-ce que la requête multimédia ? Comment utiliser ? Faites savoir à tout le monde comment utiliser les requêtes multimédias. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Qu'est-ce qu'une requête média ? A quoi ça sert ?

Les requêtes multimédias limitent la portée des styles CSS afin qu'elles ne s'appliquent que lorsque certaines conditions multimédias sont remplies.

Pour faire simple : les requêtes multimédias 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).

Les requêtes multimédias peuvent être utilisées pour détecter les propriétés multimédias telles que : la largeur, la hauteur et la couleur (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. [Tutoriels vidéo associés recommandés : Tutoriel CSS3]

Comment utiliser les requêtes multimédias ?

Nous pouvons expliquer les requêtes multimédias comme des instructions if-else pour les navigateurs. Les requêtes multimédias sont des expressions logiques qui sont évaluées comme vraies ou fausses. Une requête multimédia se compose d'un type de média facultatif, de zéro ou plusieurs attributs de média et de mots-clés logiques qui permettent la construction d'expressions plus complexes.

1. Syntaxe de base :

@media [not | only] <media-type> [and] (<media-condition>);

Instructions :

type de média

Un type de média est une large catégorie de dispositifs d'agent utilisateur qui peuvent afficher des documents HTML. La liste des types de médias a été révisée dans la spécification Media Query Level 4. Les types de médias obsolètes sont reconnus comme valides mais ne seront adaptés à aucun appareil, c'est-à-dire que votre requête multimédia s'appliquera toujours mais sur tous les appareils comme si aucun type de média n'était spécifié.

Vous pouvez définir les types de médias suivants :

tous : correspond à tous les appareils.

imprimer : correspond à l'imprimante et au périphérique utilisé pour reproduire l'affichage de l'impression, tel qu'un navigateur Web qui affiche le document dans Aperçu.

écran : correspond à tous les appareils qui ne correspondent pas à l'impression ou à la parole.

parole : correspond aux lecteurs d'écran et aux appareils similaires qui « lisent » les pages.

condition du média

Une condition du média est plus granulaire qu'un type de média dans la mesure où elle définit une seule fonctionnalité spécifique pour l'appareil dans question. La syntaxe des fonctionnalités multimédias est la même que celle des propriétés CSS, y compris le nom de la fonctionnalité, les deux-points et la valeur à tester.

La liste des fonctionnalités multimédias a également été modifiée du niveau de requête multimédia 3 au niveau de requête multimédia 4. Les fonctionnalités obsolètes ont été conservées dans la spécification pour des raisons de compatibilité ascendante, mais il est souligné qu'elles ne doivent pas être utilisées dans les nouveaux. feuilles de styles. Les agents utilisateurs continueront à les prendre en charge comme spécifié.

Vous pouvez définir les fonctions multimédia suivantes :

Taille de l'écran/de l'appareil :
largeur
hauteur
        rapport hauteur/largeur
Orientation

Qualité d'affichage :
Résolution
Scanner
grille
Mise à jour
Bloc-débordement
Débordement en ligne

Couleur :
couleur
indice de couleur
monochrome
Gamme de couleurs

Interaction :
Pointeur
       survoler
Any-pointer et any-hover

Script :
scripting :

2. Exemples d'utilisation de requêtes multimédias :

Implémentation de requêtes multimédias réactives 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;
       }
}

Explication :

La signification de cette requête multimédia est la suivante : lorsque la largeur de l'écran de l'appareil est comprise entre 320 px et 720 px, le la requête multimédia définissant la couleur d'arrière-plan du corps (couleur d'arrière-plan : rouge ;) 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 requête multimédia peut définir la couleur d'arrière-plan du corps (couleur d'arrière-plan : bleu ;), il chevauchera également la couleur d'arrière-plan du corps précédente.

Les navigateurs interrogés par css @media prennent en charge la méthode

d'application de styles basés sur les informations multimédias, y compris les tailles de page et d'appareil.

peut prendre en charge les versions suivantes :

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il pourra être utile pour l'apprentissage de chacun aidé.

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!