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
remplutôt quepxpour 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.