Dans cette séance de formation, nous allons aborder les media queries, une fonctionnalité importante de CSS3 permettant d'appliquer des styles différents en fonction des caractéristiques de l'appareil ou de l'écran utilisé pour afficher une page web. Les media queries jouent un rôle essentiel dans la création de designs responsives, c'est-à-dire des sites web qui s'adaptent automatiquement à différents appareils tels que les ordinateurs de bureau, les tablettes et les smartphones.

Prenons un exemple basique pour illustrer l'utilisation des media queries :

/* Styles de base pour tous les écrans */

body {

    background: gray;

}



/* Styles spécifiques pour les écrans dont la largeur est inférieure à 900 pixels */

@media screen and (max-width: 900px) {

    body {

        background: red;

    }

}



/* Styles spécifiques pour les écrans dont la largeur est inférieure à 600 pixels */

@media screen and (max-width: 600px) {

    body {

        background: blue;

    }

}

Dans cet exemple, nous commençons par définir un style de base pour tous les écrans avec un fond gris. Ensuite, à l'aide de la media query `@media screen and (max-width: 900px)`, nous spécifions un style différent pour les écrans dont la largeur est inférieure à 900 pixels. Dans ce cas, la couleur de fond devient rouge. De même, avec `@media screen and (max-width: 600px)`, nous spécifions un style différent pour les écrans dont la largeur est inférieure à 600 pixels, en changeant la couleur de fond en bleu.

Il existe différentes façons d'utiliser les media queries :

1. Intégration directe dans le fichier CSS principal : Vous pouvez inclure les media queries directement dans votre fichier CSS principal, en les plaçant à la fin du fichier après les styles de base. Cela vous permet de gérer toutes les règles de style au même endroit.

Exemple :

@media screen and (max-width: 600px) {

    /* Styles spécifiques pour les écrans dont la largeur est inférieure à 600 pixels */

}

2. Création de fichiers CSS séparés : Une autre approche consiste à créer des fichiers CSS distincts pour chaque cas spécifique, en utilisant la balise `<link>` pour les inclure dans la page HTML. Chaque fichier CSS contiendrait les règles de style correspondantes aux dimensions spécifiques de l'appareil.

Exemple :

<link rel="stylesheet" href="style2.css" media="screen and (max-width: 760px)"/>

Avec les media queries, vous disposez d'une puissante technique pour adapter votre site web à différents supports tels que les ordinateurs portables, les tablettes, les téléphones, les télévisions, et bien d'autres encore. Cela vous permet de garantir une expérience utilisateur optimale quel que soit l'appareil utilisé pour accéder à votre site.