CSS — Design responsive¶
Une page qui s’affiche parfaitement sur un grand écran peut devenir illisible sur un téléphone. Le design responsive consiste à concevoir un site capable de s’adapter à toutes les tailles d’écran, avec un seul jeu de code. C’est aujourd’hui une exigence de base, pas une option.
Qu’est-ce que le responsive ?¶
Définition : Design responsive
Le design responsive désigne une conception web qui s’adapte automatiquement à la taille de l’écran : une seule et même page se réorganise pour rester lisible et utilisable sur ordinateur, tablette et mobile, sans version séparée.
Un site responsive doit fonctionner aussi bien sur un grand écran d’ordinateur (1920px et au-delà) que sur une tablette (768 à 1024px) ou un mobile (320 à 768px). L’objectif est d’avoir une seule version du site pour tous les appareils, plutôt qu’un site « mobile » distinct à maintenir en parallèle.
Pourquoi c’est devenu indispensable¶
L’enjeu n’est plus théorique. Plus de 60 % du trafic web vient désormais du mobile, et Google favorise explicitement les sites responsives dans ses résultats. Un site qui ne s’adapte pas se traduit immédiatement par du texte illisible, des utilisateurs contraints de zoomer et de défiler horizontalement, bref une expérience que la plupart abandonnent en quelques secondes.
Les media queries¶
L’outil central du responsive est la media query : un bloc de CSS qui ne s’applique que si une condition sur la taille de l’écran est remplie.
/* Par défaut : mobile */
.container {
padding: 10px;
}
/* À partir de 768px : tablette / desktop */
@media (min-width: 768px) {
.container {
padding: 40px;
}
}
Le principe : le CSS contenu dans une media query ne s’active que si la condition est vraie. Ici, le padding vaut 10px partout, sauf à partir de 768px de large où il passe à 40px.
La syntaxe couvre les seuils minimum, maximum, ou les deux à la fois :
@media (min-width: 768px) {
/* Écrans de 768px et plus */
}
@media (max-width: 767px) {
/* Écrans de 767px et moins */
}
@media (min-width: 768px) and (max-width: 1024px) {
/* Écrans entre 768px et 1024px */
}
L’approche mobile-first¶
La bonne pratique consiste à commencer par le mobile, puis à enrichir pour les écrans plus grands avec des min-width. On écrit d’abord le style de base (le plus simple), et chaque media query ajoute des ajustements pour les écrans supérieurs.
/* Mobile par défaut */
.container {
padding: 10px;
font-size: 14px;
}
/* Tablette */
@media (min-width: 768px) {
.container {
padding: 20px;
font-size: 16px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
padding: 40px;
font-size: 18px;
}
}
Pourquoi commencer par le mobile ? Parce qu’il impose d’aller à l’essentiel : on construit d’abord la version contrainte, puis on profite de l’espace supplémentaire quand il existe. L’inverse — partir du desktop et tout rogner — mène presque toujours à des compromis bancals.
Les breakpoints courants¶
Les breakpoints sont les seuils où la mise en page bascule.
Taille |
Appareil |
Breakpoint |
|---|---|---|
< 768px |
Mobile |
Par défaut |
768px – 1024px |
Tablette |
|
> 1024px |
Desktop |
|
Ces valeurs ne sont pas gravées dans le marbre : ce sont des repères usuels, à adapter à votre design plutôt qu’à des modèles d’appareils précis. Le bon breakpoint est celui où votre mise en page commence à mal vieillir.
Exemples concrets¶
Le responsive prend tout son sens en combinaison avec ce que vous savez déjà. Voici trois patrons fréquents.
Une navigation qui passe de verticale (mobile) à horizontale (desktop) :
.nav {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.nav {
flex-direction: row;
}
}
Une grille qui gagne des colonnes à mesure que l’écran s’agrandit :
.grid {
display: grid;
grid-template-columns: 1fr; /* Mobile : 1 colonne */
gap: 15px;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr); /* Tablette : 2 */
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr); /* Desktop : 3 */
gap: 30px;
}
}
Une barre latérale qui n’apparaît qu’à partir du desktop :
.layout {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.layout {
flex-direction: row;
}
.sidebar { flex: 0 0 250px; }
.content { flex: 1; }
}
Les unités relatives¶
Le responsive repose aussi sur le choix des unités. Les unités fixes comme px ne s’adaptent pas ; les unités relatives, elles, se calculent par rapport à un contexte, ce qui les rend bien plus souples.
%: pourcentage de la taille du parent.em: relatif à la taille de police du parent.rem: relatif à la taille de police de la racine (<html>).vw: pourcentage de la largeur du viewport (la fenêtre).vh: pourcentage de la hauteur du viewport.
Quelques usages typiques :
/* Largeur souple, mais plafonnée */
.container {
width: 90%;
max-width: 1200px;
}
/* Taille de police relative à la racine */
body { font-size: 16px; }
h1 { font-size: 2rem; } /* 2 × 16 = 32px */
/* Une section qui occupe toute la hauteur de l'écran */
.hero {
height: 100vh;
}
rem est particulièrement précieux : en réglant toutes les tailles en rem, il suffit de changer la taille de police de <html> pour redimensionner harmonieusement tout le site.
La balise meta viewport¶
Voici un point que l’on oublie souvent, et sans lequel rien ne fonctionne sur mobile. Cette balise doit figurer dans le <head> de chaque page :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Elle indique au mobile d’utiliser la largeur réelle de l’écran (width=device-width) et de ne pas appliquer de zoom au chargement (initial-scale=1.0). Sans cette balise, le mobile fait semblant d’être un écran large et affiche une version miniature illisible — vos media queries ne se déclencheront même pas.
Images responsives¶
On l’a vu au chapitre sur les médias, mais la règle mérite d’être rappelée ici, car elle est au cœur du responsive :
img {
max-width: 100%;
height: auto;
}
L’image ne dépasse jamais la largeur de son conteneur et conserve ses proportions. À appliquer systématiquement, idéalement sur toutes les images du site.
Masquer un élément selon l’écran¶
Il arrive qu’on veuille afficher certains éléments uniquement sur mobile ou uniquement sur desktop. On le fait en jouant sur display dans les media queries :
/* Visible sur desktop seulement */
.desktop-only { display: none; }
@media (min-width: 768px) {
.desktop-only { display: block; }
}
/* Visible sur mobile seulement */
.mobile-only { display: block; }
@media (min-width: 768px) {
.mobile-only { display: none; }
}
À utiliser avec parcimonie : dupliquer du contenu pour le masquer alourdit la page. Mieux vaut, quand c’est possible, réorganiser un même contenu plutôt que d’en cacher des versions.
Exercice : une galerie responsive¶
Objectif : une galerie de 6 images affichant 1 colonne sur mobile, 2 sur tablette, 3 sur desktop.
<div class="gallery">
<img src="img1.jpg" alt="Photo 1">
<img src="img2.jpg" alt="Photo 2">
</div>
Une solution mobile-first qui réutilise Grid et les media queries :
.gallery {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
.gallery img {
width: 100%;
height: 250px;
object-fit: cover;
}
@media (min-width: 768px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.gallery {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
On pourrait d’ailleurs obtenir un résultat proche sans aucune media query, grâce au repeat(auto-fit, minmax(...)) vu au chapitre Grid — preuve qu’il existe souvent plusieurs bonnes solutions.
En résumé¶
Le responsive tient à quelques réflexes : des media queries pour adapter le style aux seuils d’écran, une approche mobile-first (du plus simple au plus riche), des unités relatives plutôt que des pixels rigides, la balise viewport obligatoire dans le <head>, et max-width: 100% sur les images. Avec Flexbox et Grid déjà en main, vous disposez de tout l’outillage pour concevoir des pages qui s’affichent bien partout.