Leçon 8 sur 8
Design responsive
Le design responsive permet à un site de bien fonctionner sur téléphones, tablettes et écrans de bureau. Commencez par les petits écrans, puis ajoutez des media queries pour les écrans plus grands.
Utilisez des unités flexibles comme %, rem, vw et des fonctions comme clamp().
CSS
/* Mobile first : styles par défaut */
.container { padding: 24px; }
/* Tablette et plus grand */
@media (min-width: 768px) {
.container { padding: 48px; }
}
/* Ordinateur */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}