Media queries : comment les utiliser pour un site responsive ?

Le langage CSS, qui accompagne le langage HTML, permet de gérer l'apparence du contenu d'un site ou d'une application. Il doit être à l'image de l'entreprise, tout en étant agréable pour l'utilisateur sur les différents supports qu'il utilise, tels qu'une tablette, un ordinateur ou un smartphone. Le contenu doit donc s'adapter pour offrir une expérience agréable, grâce aux media queries déterminés dans la feuille CSS.

Que sont les media queries en CSS ?

Les media queries, ou « requêtes média » en français, sont des modules CSS conditionnels qui permettent de créer un site responsive, c'est-à-dire d'optimiser le contenu d'une page internet ou d'une application en fonction de l'écran sur lequel il est affiché. Le contenu s'adapte ainsi à la taille de l'écran, à son orientation et à sa résolution. Concrètement, la police de caractères, les couleurs du site et la taille des images sont modifiables pour rester lisibles sur tous les supports, sans agresser l'œil ni occuper trop ou trop peu d'espace.

Tout bon développeur utilise les media queries, notamment pour déplacer le menu déroulant afin de l'ancrer à l'endroit le plus pratique selon l'affichage. Ces modifications automatiques participent à la création de ce qui est appelé un site web « responsive », qui se modifie donc en fonction de la taille du support. Les media queries sont aujourd'hui obligatoires dans la conception de sites web ou d'applications pour que chaque internaute puisse bénéficier d'une expérience utilisateur agréable.

En prévoyant ainsi plusieurs designs selon différents scénarios, le développeur ne doit concevoir qu'une seule version du site ou de l'application. Il bénéficie donc d'une plus grande rapidité d'exécution pour aboutir au résultat final.

Comment fonctionnent les media queries ?

Les media queries sont, en d'autres termes, des modèles d'apparence décrits dans la feuille CSS qui déterminent la mise en forme d'une application ou d'un site internet sur le média utilisé (téléphone, tablette, ordinateur, etc.). Ils s'exécutent lorsqu'une requête correspond à la situation vécue. Chaque media query doit donc préciser le média concerné et les critères qui le conditionnent.

Par exemple, si le média n'est pas déterminé, alors le style s'applique sur tous les appareils utilisés de manière identique, comme si le critère média « all » était défini.

Pour cibler les contenus imprimables comme les aperçus avant impression, le terme « print » est utilisé, les appareils dotés d'un écran sont définis par « screen » et enfin, les contenus lus automatiquement sont nommés « speech ».

En plus de la précision du média, 9 autres critères permettent de caractériser les media queries :

• La largeur de la fenêtre d'affichage (width).
• La hauteur de la fenêtre d'affichage (height).
• La hauteur de l'écran (device-height).
• La largeur de l'écran (device-width).
• Le ratio de l'écran (device-aspect-ratio).
• Le ratio de la fenêtre d'affichage (aspect-ratio).
• L'orientation de la zone d'affichage (orientation).
• La gestion de la couleur (color).
• Le type d'écran de sortie (media).

Les media queries peuvent être complexifiés en combinant les caractéristiques à l'aide des opérateurs logiques « not », « and » et « only ». Ainsi, un même style peut être appliqué à plusieurs hauteurs d'écran par exemple avec « and ». Quant à « not », il active les media queries lorsque la situation d'utilisation correspond à l'inverse de la requête. Il nécessite par ailleurs la désignation d'un type de média pour fonctionner. Enfin, « only » ne s'applique que si l'intégralité de la requête est vérifiée.

Comment utiliser les media queries ?

Les media queries peuvent être inclus dans une seule comme dans plusieurs feuille(s) de style CSS, selon la préférence du développeur, sachant que ce choix n'impacte pas la bonne exécution des différents media queries.

En pratique, les media queries doivent être écrits d'une manière précise, en déroulant les informations dans un ordre défini : le média concerné, le type d'écran, les différentes conditions qui doivent être vérifiées, et enfin le style CSS qui doit s'appliquer en conséquence.

Dans cet exemple, si le contenu est visionné sur un écran, avec un affichage inférieur à 1100px, alors le texte respecte un interligne de 2, prend la couleur définie par le code #00008B, qui correspond à un bleu foncé et s'ordonne en deux colonnes. Par contre, si l'affichage est supérieur à 1100px ou que le contenu s'affiche sur un autre média, aucune de ces mises en forme ne sera appliquée, le texte sera brut.

La feuille de style CSS comprend donc autant de possibilités de style que médias disponibles. Si le média utilisé correspond à l'une de ces options, alors la requête média sera considérée comme « true » et s'appliquera. Les autres requêtes média seront estimées comme « false », c'est-à-dire qu'elles ne seront pas prises en compte.

Ici, le media query utilisé contraint le texte à respecter un interligne de 1,5, la couleur blanche et une couleur de fond, lorsque le contenu s'affiche sur un écran qui respecte une dimension inférieure à 1100px. De même que pour le précédent exemple, si les conditions ne sont pas vérifiées, alors aucune de ces contraintes ne s'applique.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.