Nous ne pouvons pas imaginer le développement web moderne sans des conceptions adaptatives/réactives. Cela permet aux utilisateurs d'utiliser les ressources web de manière égale sur n'importe quel appareil : un smartphone, une tablette, un ordinateur de bureau ou une télévision.

Comment ça fonctionne ?

1. L'équipe de développement définit l'apparence de chaque élément en fonction de la taille de l'écran ;
2. Définir les instructions nécessaires dans le code ;
3. Le navigateur suit les changements de la fenêtre d'affichage ;
4. Le navigateur applique les règles que l'équipe de développement a mises sous forme de code.

Media-queries

Media-query est ce qui rend les conceptions adaptatives/réactives possibles. Avec l'aide de ces requêtes, les développeurs peuvent définir les styles de tout élément en fonction de la taille de l'écran.

Note

Nous pouvons percevoir la media-query comme des instructions : "Si l'écran de l'utilisateur est un bureau, appliquez de tels styles à l'élément. Si l'écran de l'utilisateur est un smartphone, appliquez d'autres styles à l'élément. Et ainsi de suite.".

La syntaxe de base de la media-query est la suivante :

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

1. <media_type> - déclare le type d'appareil. Valeurs possibles :
   • all - valeur par défaut. Si rien n'est spécifié, la règle média fonctionne pour tous les appareils ;
   • print - la règle média fonctionne pour les appareils qui produisent des documents imprimés, comme les imprimantes ;
   • screen - la règle média fonctionne pour tous les appareils avec un écran physique.
2. <media_feature> - déclare les caractéristiques de l'appareil. Utilisation la plus courante :
   • min-width: - la largeur minimale de la fenêtre d'affichage ;
   • max-width: - la largeur maximale de la fenêtre d'affichage.
3. <operator> - le type de média et la caractéristique de média sont séparés par l'opérateur logique optionnel. Ses valeurs peuvent être : and ou ,.

Remarque

Dans les chapitres suivants, nous envisagerons d'utiliser des media-queries en pratique.