Requêtes médiatiques dans CSS | Expliqué
Cette rédaction va présenter un guide complet pour les requêtes CSS Media et elle sera organisée comme suit:
- Que sont les requêtes médiatiques CSS?
- Syntaxe de base
- Pourquoi les requêtes multimédias sont utilisées
- Types de requêtes médiatiques
- Mise en œuvre pratique des requêtes médiatiques CSS
Alors, commençons!
Que sont les requêtes de médias CSS?
La requête multimédia nous permet de créer diverses dispositions en fonction de la taille de la fenêtre. Par exemple, les requêtes multimédias peuvent détecter si l'utilisateur utilise une souris ou un écran tactile, etc.
La liste ci-dessous présente différentes choses qu'un CSS Media Query vérifie:
- La hauteur et la largeur de la fenêtre.
- Hauteur et largeur de l'appareil.
- Résolution.
- Orientation de l'appareil I.e. portrait ou paysage.
Dans l'ensemble, nous pouvons dire que les requêtes médiatiques sont très utiles pour détecter les différents aspects liés à l'environnement sur lequel le site est en cours d'exécution.
Syntaxe de base
La syntaxe de base des requêtes multimédias se compose de plusieurs choses telles que le type de média (i.e. Écran, tout, etc.), une expression unique ou multiple. La requête médiatique sera toujours lancée avec le «@Media». Le "type de support«Peut être combiné avec expressions) À l'aide d'un opérateur logique cependant, c'est facultatif:
@Media MediaType et (expression / expressions)/ * Règles Code / CSS * /
Une requête multimédia dans CSS est une opération logique donc chaque fois qu'elle devient vraie, le CSS associé sera appliqué à l'élément cible.
Pourquoi les requêtes multimédias sont utilisées
Les requêtes multimédias sont utilisées pour fournir une apparence personnalisée à un site Web pour divers appareils tels que les ordinateurs portables, les ordinateurs de bureau, les téléphones portables, etc. Nous pouvons donc dire que les requêtes médiatiques sont utilisées pour créer de nouvelles règles CSS ou pour remplacer le CSS existant pour présenter un site Web réactif.
Types de requêtes médiatiques
Il existe quatre types de requêtes multimédias CSS qui peuvent être utilisées à différentes fins comme indiqué ci-dessous:
| Type de support | Description |
|---|---|
| tous | Utilisé pour tous les types de médias I.e. Écran, imprimé, discours |
| filtrer | Utilisé pour des écrans tels que les téléphones portables, les ordinateurs portables, etc. |
| imprimer | Utilisé pour les imprimantes uniquement. |
| discours | Utilisé pour la lecture d'écran |
Mise en œuvre pratique des requêtes médiatiques CSS
Pour l'instant, nous avons une idée de base de ce qu'est une requête médiatique, sa syntaxe, pourquoi nous devons l'utiliser et quels sont les différents types de requêtes médiatiques CSS. Et maintenant pour une compréhension profonde, nous allons mettre en œuvre ces concepts théoriques dans un scénario pratique.
Exemple
Dans cet exemple, nous allons créer trois paragraphes et une rubrique, et nous allons définir la couleur de l'arrière-plan du corps et l'alignement du texte comme gris clair et centre respectivement. De plus, nous utiliserons les requêtes multimédias pour modifier la couleur d'arrière-plan et l'alignement du texte sur bleu ciel et gauche qui entrera en action lorsque la taille de l'écran sera plus large que ou égale à 360 pixels:
Requêtes médiatiques
La couleur du corps du fond est gris clair
La couleur d'arrière-plan sera changée de gris clair au bleu ciel si la fenêtre est plus large que 360 pixels
L'extrait ci-dessous montrera le fonctionnement des requêtes médiatiques CSS:
Depuis la sortie, il est clair qu'au départ, la couleur de fond était gris clair et le texte était aligné au centre car à cette époque, la largeur de l'écran était inférieure à 360. Cependant, lorsque nous avons changé (supérieur à 360) la largeur de l'écran, la couleur d'arrière-plan et l'alignement du texte ont été modifiés à la couleur du bleu ciel et à l'alignement gauche.
Conclusion
Les requêtes multimédias sont utilisées pour personnaliser la présentation du site Web en fonction de la taille de l'écran de l'utilisateur. À l'aide de requêtes multimédias, nous pouvons afficher les différentes balisages en fonction du type de l'appareil (mobile, tablette, bureau). Dans CSS, les requêtes multimédias sont une opération logique, et donc chaque fois qu'elle devient vraie, le CSS connexe sera appliqué à l'élément cible. Cet article présente une compréhension détaillée des requêtes médiatiques CSS et pour une meilleure compréhension, il fournit des extraits de code ainsi que des sorties respectives.