Logo

Media Queries en CSS : Créer des designs responsives

Introduction

Les applications web doivent fonctionner sur une variété d'appareils, des grands écrans d'ordinateur aux petits écrans de smartphones. Les media queries permettent d'adapter la mise en page et le design selon la taille de l'écran.

Cet article explique comment utiliser les media queries pour créer des designs responsives.

1. Principes de base des media queries

Une media query permet de définir des styles CSS qui ne s'appliquent que lorsque certaines conditions sont remplies, comme une largeur d'écran spécifique.

La syntaxe de base est : @media (condition) { styles CSS }

Exemple de syntaxe de base

/* Styles par défaut */
.conteneur {
  width: 100%;
  background-color: blue;
}

/* Styles pour les écrans de moins de 768px */
@media (max-width: 768px) {
  .conteneur {
    background-color: red;
    width: 90%;
  }
}

2. Créer des styles responsives

Deux approches principales existent pour écrire des media queries : non-mobile first (max-width) et mobile first (min-width).

/* Non-Mobile First (max-width) : du plus grand au plus petit */
@media (max-width: 1200px) { /* Écrans larges */ }
@media (max-width: 992px) { /* Tablettes */ }
@media (max-width: 768px) { /* Petites tablettes */ }
@media (max-width: 576px) { /* Mobiles */ }

/* Mobile First (min-width) : du plus petit au plus grand */
@media (min-width: 576px) { /* Mobiles */ }
@media (min-width: 768px) { /* Petites tablettes */ }
@media (min-width: 992px) { /* Tablettes */ }
@media (min-width: 1200px) { /* Écrans larges */ }

Dans cet exemple, la navigation change de disposition selon la taille de l'écran.

3. Bonnes pratiques

  • Utilisez des points de rupture standard (480px, 768px, 1024px)
  • Pensez mobile-first : commencez par les styles mobile
  • Testez sur différents appareils et navigateurs

Exemple complet : Layout responsive

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Tablette */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Conclusion

Les media queries permettent de créer des interfaces adaptables à tous les types d'écrans. En combinant différents points de rupture et stratégies de design, vous pouvez développer des sites web qui s'affichent parfaitement sur tous les appareils.

Logo