Media query

Une media query est une fonctionnalité CSS qui applique un ensemble de styles uniquement lorsque l'environnement de navigation remplit certaines conditions, le plus souvent la largeur de l'écran. C'est le mécanisme central du responsive design : le même HTML s'affiche correctement sur un téléphone, une tablette et un ordinateur car des règles différentes s'appliquent selon la taille.

Comment fonctionne une media query

Une media query encadre des règles CSS dans une condition introduite par @media. Quand la condition est vraie, les styles s'appliquent ; sinon, ils sont ignorés.

• @media (min-width: 768px) { ... } s'applique à partir de 768px.
• @media (max-width: 767px) { ... } s'applique jusqu'à 767px.
• Les conditions se combinent avec and, la virgule (qui veut dire ou) et not.

Ce que l'on peut cibler

La largeur est la caractéristique la plus courante, mais une media query peut réagir à bien plus.

• orientation : portrait ou paysage.
• min-resolution : écrans haute densité (retina).
• prefers-color-scheme : mode clair ou sombre.
• prefers-reduced-motion : utilisateurs qui veulent moins d'animation.
• print : styles dédiés à l'impression.

Les points de rupture courants

La plupart des équipes définissent un petit ensemble standard plutôt qu'un par appareil.

Mobile-first ou desktop-first

Le mobile-first écrit les styles de base pour les petits écrans, puis ajoute de la complexité avec des requêtes min-width. Le desktop-first part du grand écran et réduit avec max-width. Le mobile-first produit un CSS plus léger et correspond au fait que Google explore d'abord la version mobile.

Media queries, SEO et CSS moderne

Comme Google utilise l'indexation mobile-first, un responsive solide basé sur les media queries soutient directement le SEO et les Core Web Vitals. Le CSS récent ajoute les requêtes de conteneur, qui réagissent à la taille d'un élément parent plutôt qu'au viewport et sont pratiques pour des composants réutilisables, mais les media queries restent la colonne vertébrale du responsive au niveau de la page.

Les media queries chez BeBranded

Chez BeBranded, nous construisons des mises en page responsives où les points de rupture suivent le contenu, pas des tailles d'appareils arbitraires, pour un site propre et rapide sur chaque écran. Cela fait partie de notre travail de design, qui garde des interfaces cohérentes du mobile au bureau.