# Point de rupture

> Largeur d'écran précise à partir de laquelle une mise en page change de comportement, définie par une media query plutôt que par le modèle d'un appareil.

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

Choisir 782 pixels plutôt que 800, ou 1024 plutôt que 960 : ces chiffres ne sont jamais tombés du ciel, ils correspondent à des seuils où le contenu, à un instant donné, cesse de se lire ou de s'organiser correctement dans son gabarit actuel. C'est ce seuil que ce terme désigne.

## Une décision de contenu, pas de catalogue d'appareils

La bonne pratique consiste à choisir ces seuils en observant où la mise en page se dégrade réellement pendant qu'on redimensionne la fenêtre, plutôt qu'en calant des valeurs sur des largeurs d'appareils commerciaux, condamnées à devenir obsolètes à chaque nouvelle génération de téléphones. WordPress illustre bien ce principe avec l'administration, dont l'interface bascule en mode simplifié à 782 pixels, un seuil choisi pour son contenu propre, indépendamment de tout modèle de téléphone particulier.

## Exemple : des seuils nommés en variables

```
:root {
  --seuil-tablette: 48rem;
  --seuil-bureau: 64rem;
}

@media (min-width: 48rem) { /* tablette */ }
@media (min-width: 64rem) { /* bureau */ }
```

## Bon à savoir

- Utiliser des unités relatives comme `rem` plutôt que `px` pour ces seuils permet à la mise en page de rester cohérente lorsque l'utilisateur augmente la taille de police par défaut de son navigateur.
- Un thème à blocs WordPress définit ses propres seuils dans le fichier `theme.json`, notamment pour les largeurs de contenu et de contenu large, sans forcément recourir à des media queries écrites à la main.
- Multiplier les points de rupture au-delà de trois ou quatre complique rapidement la maintenance : mieux vaut une mise en page fluide entre deux seuils bien choisis qu'une accumulation de cas particuliers.