Les media queries pour rendre un site internet responsive

Introduction à l'utilisation des media queries

L'objectif de cet article est d'offrir les possibilités de comprendre rapidement les méthodes à mettre en œuvre, pour permettre à une application web de s'ajuster automatiquement à la taille d’écran du terminal client (responsive web design). Rendre une page internet responsive web design est rendu possible grâce aux possibilités offertes par les media queries.

Sommairement, les media queries se comportent comme des règles inclusives ou exclusives. Elles permettent de définir sur quel type et sur quelle taille de terminal les propriétés CSS vont s'exécuter.

Elles offrent également la possibilité, d'intégrer des opérateurs logiques.

À noter qu'il n'est pas nécessaire d'utiliser de dépendance pour utiliser les media queries, le CSS3 permet de le faire nativement à l'aide de la balise @media.

Actuellement, la majeur partie des recherches sur internet s'effectuent depuis des mobiles. C'est pourquoi Google index la version responsive du site internet. Et c'est pour cette raison que les bonnes pratiques de développement d'interface utilisateur commencent par la version mobile, pour finir sur la version bureau.

Sachez également qu'il existe des librairies permettant de se simplifier la tâche, dont la plus connue bootstrap.

Définition des media queries :

Comme expliqué plus haut, les media queries sont des règles CSS conditionnels.

Les media queries s'appuient sur la règle @media qui permet de définir différents styles CSS pour différents types d’appareils et selon différents critères.

Les media queries permettent donc de présenter un contenu HTML identique de plusieurs façons et cela, en fonction du terminal utilisé par les utilisateurs de l'application pour parcourir les pages du site internet.

Il va alors pouvoir être possible de modifier l'emplacement des différents composants de notre page internet ainsi que les couleurs, la taille de la police, etc. Le tout par rapport à la taille de l'écran du visiteur, et cela grâce aux media queries.

Les sélecteurs de typologie de terminaux :

• all (tous les formats)
• screen (tous écrans valeur par défaut si non précisé)
• print (appliquer en cas d'impression)
• braille (braille)
• embossed (imprimante à braille)
• projection (projecteur)
• tv (téléviseur)
• handheld (théoriquement périphériques mobiles ou de petite taille, mais dépendant pour beaucoup de l'interprétation du navigateur à éviter)
• aural (synthèse vocal)
• speech (synthèse vocal)

Les opérateurs logiques des media queries :

Les opérateurs logiques permettent de définir un ensemble de conditions à réunir pour choisir quel lot de règles CSS seras appliqué. On dénombre 3 opérateurs.

• only (uniquement)
• not (négation de la condition booleen)
• and (clause associative)

Les sélecteurs de propriétés :

Il existe différents sélecteurs qui peuvent servir de concert avec les opérateurs logiques. Les plus utilisés sont width (dimension en largeur de la zone d'affichage) et height (dimension en hauteur de la zone d'affichage). Mais il est intéressant de savoir qu'il en existe d'autres.

• width (dimension en largeur de la surface d'affichage)
• height (dimension en hauteur de la surface d'affichage)
• device-width (dimension en largeur de l'écran)
• device-height (dimension en hauteur de l'écran)
• device-aspect-ratio (ratio du périphérique de sortie 16:9, 4:3, etc)
• orientation (orientation de l'écran portrait ou paysage)
• resolution (la résolution en dpi,dpcm, dppx, de l'écran)

Cette liste n'est pas exhaustive et ne couvre que les principaux sélecteurs de propriétés.

Priorité des règles de style des media queries sur les styles globaux :

Les styles des règles @media sont toujours prioritaires par rapport aux styles globaux. Dans l'exemple de code CSS suivant les balises h1 serons en bleu sur chaque type d'équipement. En cas d'impression du document html, ils passerons en rouge.

h1{
 color:blue;
}

@media print{
  h1 {
    color:red;
  }
}

Cas d'application concrète à l'aide des media queries :

Dans l'exemple de mise en pratique des media queries suivant seule les imprimantes afficherons leur titre h1 en rouge.

@media print{
  h1 {
    color:red;
  }
}

Dans celui ci après seul les pages affichées via des projecteurs verront leur titre h1 en vert.

@media projection {
  h1 {
    color:green;
  }
}

L'exemple ci après désigne uniquement les écrans de largeur inférieure à 360 pixels.

@media screen and (max-width: 360px) {
  h1 {
    color:blue;
  }
}

@media screen and (min-width: 800px) and (max-width: 1024px) {
  h1 {
    color:purple;
  }
}

Pour les développeurs travaillant avec bootstrap (v4.3)

Dans bootstrap les media queries fonctionnent dans une logique de développement « mobile-first ». Autrement dit, le développement du visuel doit d'abord répondre aux problématiques des téléphones portables, puis les règles des media queries doivent cibler les terminaux dont les écrans sont plus grands.

Ecrans de taille inférieur 576 pixels et supérieur (téléphone en mode paysage).

@media (min-width: 576px) { }

Ecrans de taille inférieur 768 pixels et supérieur (tablette).

@media (min-width: 768px) { }

Ecrans de taille inférieur 992 pixels et supérieur (pc portable).

@media (min-width: 992px) { }

Ecrans de taille inférieur 1200 pixels et supérieur (pc de bureau à grand écran).

@media (min-width: 1200px) { }