Chapitre 170 | Responsive : media queries

Responsive : media queries

Voici un exemple simple de code HTML et CSS avec des media queries pour afficher une page avec des couleurs de fond différentes pour desktop, tablette et mobile.

Les trois breakpoints définis sont :

• Desktop (large) : écran de 1024px ou plus.
• Tablette (medium) : écran entre 768px et 1024px.
• Mobile (small) : écran de moins de 768px.

Exemple interactif

1. Essayez de réduire ou d’agrandir la fenêtre de votre navigateur en regardant le site.
2. Vous verrez les couleurs de fond changer en fonction de la taille de l’écran !

Qu’est-ce qu’une media query ?

Une media query est une règle CSS qui permet de modifier l’apparence d’un site web en fonction de la taille de l’écran de l’utilisateur (ordinateur, tablette, mobile, etc.). Cela permet d’adapter le design pour qu’il soit agréable à regarder, peu importe l’appareil.

Décryptage des exemples

1. Tablette : écran entre 768px et 1024px

@media (min-width: 768px) and (max-width: 1023px) {
  div {
    background-color: lightgreen; /* Fond pour tablette */
  }
}

Explications :

• @media : commence une media query.
• (min-width: 768px) : cette règle s’applique si l’écran a une largeur minimum de 768 pixels.
• (max-width: 1023px) : cette règle s’applique si l’écran a une largeur maximum de 1023 pixels.
• Ensemble, cela signifie : “Applique ces styles uniquement sur les écrans entre 768 pixels et 1023 pixels de large”. Typiquement, ce sont les écrans de tablette.

Changement : dans ce cas, le fond de l’élément <div> devient vert clair (lightgreen) pour les tablettes.

2. Desktop : écran 1024px ou plus

@media (min-width: 1024px) {
  div {
    background-color: lightcoral; /* Fond pour desktop */
  }
}

Explications :

• (min-width: 1024px) : cette règle s’applique si l’écran a une largeur minimum de 1024 pixels.
• Aucun max-width n’est défini, donc cette règle s’applique à tous les écrans qui font 1024 pixels ou plus. Typiquement, ce sont les écrans d’ordinateurs.

Changement : dans ce cas, le fond de l’élément <div> devient corail clair (lightcoral) pour les écrans d’ordinateur.

Comment ça fonctionne ?

1. Par défaut, les styles CSS de base s’appliquent à tous les appareils (exemple : le fond bleu clair pour le mobile dans notre exemple précédent).
2. Quand la largeur de l’écran correspond aux conditions définies par une media query (min-width et/ou max-width), ces styles spécifiques remplacent les styles par défaut.

Pourquoi utiliser cela ?

Pour éviter que le site ne soit trop petit ou trop grand sur certains écrans.

Pour rendre un site responsive, c’est-à-dire adapté à tous les appareils (mobile, tablette, ordinateur).

Point de vigilance

Lors de l’utilisation des media queries, il est crucial de bien gérer les double accolades {{ et }}, car une erreur peut facilement casser tout le style ou rendre les règles inefficaces.

@media (min-width: 1024px) { /* Début media query */
    div { /* Début style du div */
        background-color: lightcoral; /* Style desktop */
    } /* Fin style du div */
} /* Fin media query */

@media (min-width: 1024px) { /* Début media query */
    div.container { /* Début style du div principal */
        background-color: lightcoral;
        padding: 20px;
        border: 2px solid darkred;
    } /* Fin style du div principal */

    div.container h2 { /* Début style du titre */
        color: white;
        font-size: 2rem;
        margin-bottom: 10px;
    } /* Fin style du titre */

    div.container p { /* Début style du paragraphe */
        color: black;
        font-size: 1.2rem;
        line-height: 1.5;
    } /* Fin style du paragraphe */
} /* Fin media query */

Exercice

Dans le fichier CSS, modifiez les règles pour que le texte de l’élément <h1> « Exemple de Media Queries » change de couleur en fonction de la taille de l’écran. Voici les couleurs à appliquer selon chaque breakpoint  :

1. Mobile (par défaut) : le texte doit être en bleu foncé (darkblue).
2. Tablette (768px – 1023px) : le texte doit être en vert foncé (darkgreen).
3. Desktop (1024px ou plus) : le texte doit être en rouge foncé (darkred).

Étapes à suivre :

1. Pour le mobile (par défaut) : ajoutez une règle pour définir la couleur par défaut du <h1> à darkblue.
2. Dans la media query pour la tablette (768px – 1023px) : ajoutez une règle pour changer la couleur du <h1> à darkgreen.
3. Dans la media query pour le desktop (1024px ou plus) : ajoutez une règle pour changer la couleur du <h1> à darkred.

Bloqué ? Envie de vérifier ? Voici un exemple de corrigé :