Un site responsive (ou « adaptatif ») est conçu pour s’afficher de manière optimale sur tous les types d’écrans : ordinateurs, tablettes et smartphones. L’objectif est d’offrir une expérience utilisateur cohérente, quelle que soit la taille de l’écran, en adaptant la mise en page, les images et les interactions.
Pourquoi est-ce important ?
- Plus de 50 % du trafic web provient des mobiles (2025).
- Google privilégie les sites mobiles dans ses résultats de recherche (SEO).
- Meilleure accessibilité et satisfaction utilisateur.
Que sont les media queries ?
Les media queries sont des règles CSS qui permettent d’appliquer des styles en fonction des caractéristiques de l’appareil (largeur, hauteur, orientation, etc.).
Largeurs typiques
| Appareil | Largeur typique (px) | Media Query exemple |
| Smartphones | ≤ 480px | @media (max-width: 480px) { … } |
| Tablettes | ≤ 768px | @media (max-width: 768px) { … } |
| Petits écrans | ≤ 1024px | @media (max-width: 1024px) { … } |
| Grands écrans | ≥ 1200px | @media (min-width: 1200px) { … } |
Syntaxe de base
@media (condition) {
/* Styles CSS appliqués si la condition est vraie */
}Exemple :
/* Style par défaut (desktop) */
.body {
font-size: 16px;
}
/* Style pour écrans ≤ 768px (tablettes) */
@media (max-width: 768px) {
.body {
font-size: 14px;
}
}
/* Style pour écrans ≤ 480px (smartphones) */
@media (max-width: 480px) {
.body {
font-size: 12px;
}
}Exercice
Créez une page HTML avec un titre, un paragraphe et une image.
- Ajoutez une media query pour :
- Réduire la taille de la police sur mobile.
- Centrer l’image et limiter sa largeur à 100 %.
- Testez le résultat en redimensionnant votre navigateur.