Phase 4 — Responsive & moderne
#13 Design responsive
media queries, mobile-first, viewport
Qu'est-ce que le design responsive ?
Le design responsive fait que votre site s'adapte à toutes les tailles d'écran — du téléphone aux grands moniteurs. Les principes clés : layouts fluides, images flexibles et media queries.
La balise meta viewport
viewport
<!-- Obligatoire dans toute page responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">Media queries
Media queries mobile-first
/* Styles de base pour mobile */
.grille {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablette (768px+) */
@media (min-width: 768px) {
.grille {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
.grille {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}Typographie fluide
clamp() pour des tailles fluides
h1 {
/* Min : 1.5rem, Préféré : 4vw, Max : 3rem */
font-size: clamp(1.5rem, 4vw, 3rem);
}
p {
font-size: clamp(0.9rem, 1.5vw, 1.125rem);
}Images responsives
Images qui s'adaptent
img {
max-width: 100%;
height: auto;
}
/* Direction artistique avec picture */
<picture>
<source media="(min-width: 1024px)" srcset="hero-large.jpg">
<source media="(min-width: 768px)" srcset="hero-medium.jpg">
<img src="hero-small.jpg" alt="Image hero">
</picture>Unités relatives
Unités relatives
/* rem : relatif à la taille de police racine */
padding: 1.5rem; /* 24px si racine = 16px */
/* em : relatif à la taille de police du parent */
margin-bottom: 1em;
/* vw/vh : largeur/hauteur du viewport */
.hero { height: 100vh; }
/* % : relatif au parent */
.sidebar { width: 25%; }À vous de jouer
Essayez les commandes ci-dessous :
terminal — browser