Comprendre @media en CSS

@media est une règle CSS qui permet d'appliquer des styles différents en fonction des types de média ou des caractéristiques de l'appareil sur lequel le contenu est consulté. Le terme "media queries" est également souvent utilisé pour se référer à cette fonctionnalité.

Le principal avantage de l'utilisation de la règle @media est de permettre une conception web réactive. En d'autres termes, la mise en page et le design de votre site web peuvent s'adapter dynamiquement à la taille de l'écran ou à l'orientation (portrait ou paysage) du dispositif de l'utilisateur. Cela améliore grandement l'ergonomie et l'expérience utilisateur sur divers appareils comme les ordinateurs de bureau, les tablettes et les smartphones.

Voici un exemple simple de l'utilisation de @media :

/* Style par défaut pour les ordinateurs de bureau */
body {
  background-color: lightblue;
}

/* Lorsque la largeur de l'écran est inférieure à 600px, appliquez un style différent */
@media screen and (max-width: 600px) {
  body {
    background-color: lavender;
  }
}

Dans cet exemple, la couleur de fond par défaut du body est lightblue. Cependant, si la largeur de l'écran de l'appareil est inférieure à 600px, la couleur de fond devient lavender.

Il est essentiel de noter que @import, @extend et @debug sont également des règles CSS, mais elles servent à des fins différentes. @import est utilisé pour importer un fichier CSS dans un autre. @extend est une fonctionnalité de Sass, un préprocesseur CSS, qui permet à une classe de partager un ensemble de propriétés CSS avec une autre. Et @debug est une directive Sass utilisée pour afficher la valeur d'une expression Sass dans la console, principalement pour le débogage. Aucune de ces règles n'est utilisée pour définir la règle de style pour différents types de média.