Aller au contenu principal

Media Queries

Pour un site Web qui s'adapte à toutes les tailles d'écran

Notions théoriques​

Pour cette troisième séance, nous allons découvrir comment rendre notre portfolio responsive.

Pour cela, nous allons utiliser une fonctionnalité puissante de CSS : les Media Queries. Les Media Queries permettent d'appliquer des styles spécifiques en fonction de la taille de l'écran ou d'autres caractéristiques de l'appareil de l'utilisateur.

Nous allons également découvrir comment Flexbox peut nous aider à rendre notre portfolio responsive.

En combinant Flexbox et Media Queries, nous pouvons créer des designs qui s'adaptent à toutes les tailles d'écran.

Exemple pratique​

Supposons que nous ayons une barre latérale et un contenu principal dans notre portfolio. Sur un grand écran, nous voulons que la barre latérale et le contenu principal soient côte à côte, mais sur un petit écran, nous voulons qu'ils soient empilés verticalement. Voici comment nous pourrions le faire :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            height: 200px;
        }
    
        .sidebar {
            flex: 1 0 200px;
            background-color: lightblue;
        }
    
        .main {
            flex: 5 1 auto;
            background-color: lightgreen;
        }
    
        @media (max-width: 600px) {    
            .sidebar,
            .main {
                flex: 1 0 100%;
            }
        }
    </style>    
</head>
<body>
    <div class="container">
        <div class="sidebar">Barre latérale</div>
        <div class="main">Contenu principal</div>
    </div>    
</body>
</html>

Avec ce code, la barre latérale et le contenu principal seront côte à côte sur un grand écran, mais seront empilés verticalement sur un écran de 600 pixels de large ou moins.

astuce

Les Media Queries sont utilisées pour appliquer des styles différents, selon les caractéristiques du média :

  • la largeur et la hauteur de la fenêtre d'affichage,
  • la résolution de l'écran,
  • et même le type d'appareil (imprimante, écran, etc).

Voici 2 exemples de Media Queries :

  1. @media (max-width: 600px) : s'applique lorsque la largeur de la fenêtre d'affichage est de 600 pixels ou moins.

    C'est souvent utilisé pour cibler les smartphones.

  2. @media (min-width: 600px) : s'applique lorsque la largeur de la fenêtre d'affichage est de 600 pixels ou plus.

    C'est souvent utilisé pour cibler les appareils plus grands, tels que les tablettes et les ordinateurs.

Test de mémorisation/compréhension​


Que sont les Media Queries ?


Comment rendre notre portfolio responsive avec Flexbox et Media Queries ?


Qu'est-ce que 'max-width: 600px' dans une Media Query ?


Qu'est-ce que 'flex: 1 0 100%' ?


Comment faire pour que la barre latérale et le contenu principal soient côte à côte sur un grand écran, mais soient empilés verticalement sur un petit écran ?


TP pour réfléchir et résoudre des problèmes​

Pour ce TP, nous allons créer des cartes de projet qui s'adaptent en fonction de la taille de l'écran.

  • Sur un grand écran, nous voulons que les cartes soient disposées en trois colonnes,
  • mais sur un écran moyen, nous voulons qu'elles soient disposées en deux colonnes,
  • et sur un petit écran, nous voulons qu'elles soient disposées en une seule colonne.

Voici un exemple de ce à quoi cela pourrait ressembler :

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card {
  flex: 1 0 200px;
  margin: 10px;
  padding: 20px;
  background-color: lightblue;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

@media (min-width: 600px) {
  .card { flex: 1 0 calc(33% - 20px); }
}
@media (max-width: 600px) {
  .card { flex: 1 0 calc(50% - 20px); }
}
@media (max-width: 400px) {
  .card { flex: 1 0 100%; }
}
</style>

<div class="container">
  <div class="card">
    <h3>Projet 1</h3>
    <p>Description du projet 1</p>
  </div>
  <div class="card">
    <h3>Projet 2</h3>
    <p>Description du projet 2</p>
  </div>
  <div class="card">
    <h3>Projet 3</h3>
    <p>Description du projet 3</p>
  </div>
  <div class="card">
    <h3>Projet 4</h3>
    <p>Description du projet 4</p>
  </div>
  <!-- Autres cartes de projet -->
</div>

Dans cette solution, nous avons ajouté des titres et des descriptions à nos cartes de projet. Nous avons aussi utilisé justify-content: space-between pour répartir uniformément l'espace entre les cartes.

remarque

La propriété calc() est utilisée pour calculer la largeur des cartes.

.card { flex: 1 0 calc(50% - 20px); }

Chaque carte aura une largeur de 50% de la largeur de l'écran, moins 20 pixels.