Apprends les fondamentaux du design web responsive incluant les unités relatives, la balise meta viewport, max-width, les media queries, et l'approche mobile-first pour créer des sites qui fonctionnent sur toutes les tailles d'écran.
Le design responsive signifie créer des mises en page qui s'adaptent aux différentes tailles d'écran. La première étape est d'arrêter de se reposer uniquement sur des valeurs fixes en pixels et de commencer à utiliser des unités relatives.
Unités relatives courantes :
| Unité | Relative à |
|---|---|
% | Taille de l'élément parent |
em | Taille de police de l'élément actuel |
rem | Taille de police de la racine (élément <html>) |
vw | 1% de la largeur du viewport |
vh | 1% de la hauteur du viewport |
.container {
width: 90%; /* 90% de la largeur du parent */
max-width: 1200px; /* mais jamais plus large que 1200px */
margin: 0 auto; /* centrer horizontalement */
}
.text {
font-size: 1.125rem; /* 18px quand la racine est à 16px */
padding: 1em; /* le padding s'adapte à la taille de police */
}La propriété max-width est cruciale pour le design responsive : elle permet à un élément d'être fluide (en utilisant % ou vw) tout en définissant une limite supérieure pour que le contenu ne s'étire pas trop sur les grands écrans.
/* Styles de base (mobile-first) */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablette : 768px et plus */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop : 1024px et plus */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Tu peux aussi interroger d'autres caractéristiques */
@media (prefers-color-scheme: dark) {
body {
background: #0f172a;
color: #e2e8f0;
}
}Mobile-first signifie écrire ton CSS de base pour les plus petits écrans, puis ajouter de la complexité pour les écrans plus grands en utilisant des media queries min-width.
Pourquoi mobile-first ?
La balise meta viewport est essentielle pour le design responsive. Sans elle, les navigateurs mobiles affichent les pages à une largeur de bureau virtuelle (généralement 980px) puis réduisent le résultat. Ajoute ceci dans ton <head> :
<meta name="viewport" content="width=device-width, initial-scale=1">Cela indique au navigateur de définir la largeur du viewport égale à la largeur de l'appareil, te donnant une relation pixel 1:1 et permettant à tes media queries de fonctionner correctement.
Dans une approche mobile-first, quel type de media query dois-tu utiliser pour ajouter des styles pour les écrans plus grands ?