Concevoir en partant d’un grand écran puis retirer des éléments pour les petits appareils aboutit presque toujours à des compromis frustrants. Inverser le sens du travail, en partant du plus contraint, force à hiérarchiser l’essentiel dès le départ, et le reste suit plus naturellement.
Des media queries en min-width, pas en max-width
Techniquement, cette méthode se traduit par des styles de base pensés pour petit écran, puis des media queries utilisant min-width pour ajouter de la complexité au fur et à mesure que l’espace disponible augmente, plutôt que des max-width qui retirent des styles à partir d’une base large. Cette organisation réduit généralement le volume total de CSS et limite les redéfinitions en cascade.
Exemple
.carte {
display: block; /* base mobile */
}
@media (min-width: 48rem) {
.carte {
display: flex;
gap: 1rem;
}
}
Bon à savoir
- Cette approche s’accorde naturellement avec la performance : le navigateur mobile télécharge en priorité les styles réellement nécessaires à son contexte, sans devoir désactiver du CSS superflu.
- De nombreux thèmes WordPress plus anciens ont été construits dans l’autre sens, avec des media queries en
max-width: les deux approches restent valides, mais mélanger les deux logiques dans un même projet complique sérieusement la maintenance. - Cette méthode concerne la mise en page ; elle n’a pas de lien direct avec l’indexation mobile des moteurs de recherche, qui dépend d’autres facteurs techniques.
- Beaucoup de développeurs commencent leur feuille de style par une réinitialisation légère puis par ces styles de base mobile, avant même d’écrire la première media query, pour s’assurer que la page reste utilisable si le CSS ne se charge pas entièrement.