Si je vous dis Média Queries, ça vous évoque quelque chose ?
Si vous ne connaissez pas ce terme, pas de souci !
Vous le comprendrez davantage en lisant cet article et en surfant sur la toile via votre smartphone.
Tout d’abord, voici sa définition d’un point de vue expert :
Le Média Query est une technique qui vise à changer le design d’un site Internet selon les caractéristiques de l’écran utilisé. C’est un élément important du CSS3.
Laurent m’a proposé de vous expliquer ce terme il y a quelques semaines et je l’ai complètement oublié. Heureusement, notre expert en Marketing Digital me l’a rappelé ce matin…
Découvrons ensemble ce qui se cache derrière ce terme !
Ma définition de Média Queries
Les requêtes média ne sont pas de nouvelles propriétés, mais des règles à appliquer pour changer l’apparence d’un site en fonction :
- Des résolutions d’écran,
- Du type d’écran,
- De l’orientation de l’écran (vertical, horizontal)…
Les Média Queries reposent sur plusieurs critères :
- Width (largeur de la fenêtre d’affichage),
- Height (hauteur de la fenêtre d’affichage),
- Device-height (hauteur de l’écran),
- Device-width (largeur de l’écran),
- Device-aspect-ratio (ratio de l’écran),
- Aspect-ratio (ratio de la fenêtre d’affichage),
- Orientation (orientation de la zone d’affichage : portait ou paysage),
- Color (gestion de la couleur),
- Media (type d’écran de sortie)…
Journal du Net souligne que le Média Query fait partie des spécifications CSS3 incontournables dans la conception d’un responsive web design.
À quoi ça sert le Média Query ?
L’utilisation des Média Queries dans le développement de votre site Web vous fera bénéficier de nombreux avantages :
- Gain de temps : vous n’aurez pas à créer une interface différente pour chaque support,
- Rotation portrait / paysage facilitée sur supports nomades,
- Possibilité de charger des styles CSS différents en fonction de certains paramètres,
- Possibilité de changer la couleur de fond, d’augmenter la taille du texte, de positionner différemment le menu dans certaines résolutions…
- Atteindre un nombre maximum d’utilisateurs : en effet, les internautes sont de plus en plus nombreux à surfer sur la toile via leurs appareils mobiles (tablette, smartphone…),
- Optimisation pour les moteurs de recherche : le contenu d’un site web responsive s’affiche correctement grâce aux requêtes média, contribuant à l’optimisation de celui-ci pour les moteurs de recherche et à l’amélioration de son référencement…
Comment appliquer les requêtes média ?
Les requêtes média peuvent être appliquées de 2 façons, notamment :
- En écrivant directement les règles dans la feuille de style CSS :
Ici le code à appliquer se fait comme suit si vous souhaitez, par exemple, appliquer certaines propriétés CSS pour une résolution inférieure à 1280px de large.
@media screen and (max-width: 1280px)
{
/* Rédigez les propriétés CSS ici */
}
- En chargeant une feuille de style CSS différente :
En reprenant le même exemple, voici le code à appliquer :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <!-- Pour tout le monde --> <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> <!-- Pour ceux qui ont une résolution inférieure à 1280px --> <title>Media queries</title> </head>
