Media Hub

Créer un site web responsive

Publié le 30 novembre 2025 par Michael Leigh

Un site responsive s’adapte automatiquement à la taille de l’écran. L’objectif est de rendre la lecture confortable sur mobile, tablette et ordinateur sans zoom ni défilement horizontal.

Approche mobile-first

Commencez par des styles simples pour les petits écrans, puis ajoutez des règles spécifiques pour les écrans plus larges.

Media queries

Les media queries appliquent des styles selon la largeur de la fenêtre :

/* Base : mobile */
main { padding: 0 16px; }

/* Écrans ≥ 600px */
@media screen and (min-width: 600px) {
  main { padding: 0 32px; }
}

/* Écrans ≥ 960px */
@media screen and (min-width: 960px) {
  main { padding: 0 40px; }
}
      

Images fluides

Rendez les images flexibles pour éviter les débordements :

img { max-width: 100%; height: auto; display: block; }
      

Grilles flexibles

Utilisez Flexbox ou Grid pour des mises en page qui s’adaptent. Exemple Grid :

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
      

Conclusion

Avec une approche mobile-first, des media queries bien choisies, des images fluides et une grille flexible, vous obtenez une mise en page nette sur tous les appareils.