# Conception adaptative

> Approche de mise en page où l'interface se réorganise automatiquement selon la taille de l'écran, sans nécessiter de version distincte du site.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/conception-adaptative/

Un même site consulté sur un téléphone, une tablette et un grand écran de bureau ne devrait jamais donner l'impression d'avoir été mal redimensionné : c'est tout l'enjeu de cette approche, popularisée au début des années 2010 avec la généralisation des smartphones.

## Trois ingrédients combinés

Concrètement, cela repose sur des unités relatives ou fluides plutôt que des largeurs fixes en pixels, des images qui s'adaptent grâce à `max-width: 100%` ou à l'attribut `srcset`, et des points de rupture définis par des media queries pour réorganiser franchement la mise en page à certains seuils. WordPress applique nativement ce principe aux images insérées dans le contenu, en générant automatiquement l'attribut `srcset` depuis WordPress 4.4, sans configuration particulière du thème.

## Exemple

```
.grille-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
```

## À ne pas confondre avec

- La conception mobile d'abord, qui est une méthode particulière de mise en œuvre de cette approche, pas un synonyme : on peut concevoir de façon adaptative en partant du grand écran, même si c'est rarement recommandé aujourd'hui.
- Un site adaptatif par paliers fixes (« adaptive design »), qui bascule entre quelques gabarits prédéfinis plutôt que de fluidifier continuellement la mise en page.

Bon à savoir : les propriétés modernes `clamp()`, combinées à des unités comme `vw`, permettent aujourd'hui de faire varier une taille de texte en continu, réduisant le nombre de media queries nécessaires pour un rendu fluide.