Formation CSS | Responsive Design avec les Media Queries

Les media-queries permettent de modifier l'apparence d'une page web en fonction du type d'appareil utilisé pour naviguer dessus ainsi que ses caractéristiques.

Icône de calendrier MAJ en
Débutant
9 chapitres

Responsive Design

Le responsive design consiste à adapter le design d’une page web à de nombreuses résolutions. Cette tendance est apparue sur le web avec la démocratisation des smartphones et plus globalement des supports électroniques reliés à internet (tablettes, smart TV…).

Aujourd’hui, il est essentiel pour un site web de pouvoir être consulté depuis de nombreux types d’appareils.

Media-queries

Les media-queries sont à la base du « Responsive Design ».

Les media queries sont un mécanisme en CSS qui permet d’appliquer des styles différents en fonction des caractéristiques du périphérique ou de l’environnement d’affichage.

Elles sont utilisées pour créer des mises en page réactives et adaptatives, offrant ainsi une expérience utilisateur optimale sur différents appareils (écrans d’ordinateur, les tablettes, les smartphones, les imprimantes, les télévisions, les projecteurs…).

Concrètement, les media queries permettent de définir des règles CSS spécifiques qui s’appliquent uniquement lorsque certaines conditions sont remplies, telles que :

  • La largeur de l’écran
  • La résolution
  • L’orientation (portrait / paysage)
  • Les fonctionnalités du navigateur (thème clair / sombre, contraste élevé)
  • Etc.

S’il est possible de cibler tout un tas de caractéristiques via les media-queries, elles sont aujourd’hui la plupart du temps utilisées pour adapter le design d’une page web à la largeur de l’écran du visiteur en appliquant des règles CSS de manière conditionnelle.

Voici quelques exemples d’usages usuels des media-queries :

  • Un menu burger
  • Les colonnes d’un site web (sur mobile on place majoritairement les éléments les uns en dessous des autres et sur PC on a tendance à placer les contenus au sein de colonnes).
  • Des images purement cosmétiques vont parfois être invisibles sur mobile afin de ne pas surcharger l’affichage
  • La taille des textes peut varier pour une meilleure lisibilité
  • Etc…

Règle @media

Les media queries sont définies à l’intérieur d’une règle @media dans une feuille de style CSS.

Pour baser une media-query sur la largeur de la zone d’affichage (aussi désignée par le terme « viewport »), alors on ajoute le terme screen :

@media screen...

Ensuite, il faut définir un point de rupture et indiquer un type de borne.

Points de rupture (breakpoints)

Un point de rupture, aussi appelé « breakpoint », désigne une largeur d’écran limite, qui une fois franchie, déclenchera une media-query.

Concrètement on pourrait créer des breakpoints pour n’importe quelle dimension, en revanche, on s’accorde généralement à travailler avec des valeurs « standards » qui correspondent aux formats d’appareil les plus courants.

Voici un référentiel sur lequel vous pouvez vous baser à titre d’exemple.

AppareilPoint de rupture
Mobile + Tablette (portrait)≥768px
Tablette (paysage)≥768px à 1024px
Laptop≥1024px à 1280px
Desktop≥1280px

Bornes

Une fois le point de rupture défini il va falloir indiquer si nos media-queries doivent s’appliquer lorsque l’on passe au-dessus ou en dessous de ce seuil.

On distingue aujourd’hui deux syntaxes pour écrire des media queries :

  • L’approche traditionnelle par combinaison avec le mot-clé and, largement supportée par l’ensemble des navigateurs web.
  • L’approche plus actuelle, basée sur les opérateurs de comparaison, dont la compatibilité est croissante mais pas encore générale.

Borne minimale

Syntaxe par combinaison

Si une media-query est définie avec min-width, alors on indique qu’elle doit être déclenchée lorsqu’on passe au-dessus du point de rupture (valeur du point de rupture incluse).

copié !
/* >= 768px */
@media screen and (min-width: 768px) {
	/* Code CSS... */
}
Syntaxe avec opérateur de comparaison

Alternativement, la syntaxe par opérateur de comparaison, est plus explicite :

copié !
@media (width >= 768px) {
	/* Code CSS... */
}

Borne maximale

Syntaxe par combinaison

Si une media-query est définie avec max-width, alors on indique qu’elle doit être déclenchée lorsqu’on passe en-dessous du point de rupture (valeur du point de rupture incluse).

copié !
/* <= 1024px */
@media screen and (max-width: 1024px) {
	/* Code CSS... */
}
Syntaxe avec opérateur de comparaison

Alternativement, la syntaxe par opérateur de comparaison, est plus explicite :

copié !
@media (width <= 1024px) {
	/* Code CSS... */
}

Intervalle

Syntaxe par combinaison

Si on utilise min-width et max-width conjointement avec un opérateur logique and, on peut créer des conditions plus complexes comme par exemple tester l’appartenance d’une valeur à un intervalle.

copié !
/* Entre 768px et 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* Code CSS... */
}
Syntaxe avec opérateur de comparaison

Alternativement, la syntaxe par opérateur de comparaison, est plus explicite :

copié !
@media (768px <= width <= 1024px) {
	/* Code CSS... */
}

Mobile First

Dans le monde du webdesign et de l’intégration, nous parlons aujourd’hui de « Mobile First » ; cela signifie que plus de 50% de la navigation sur le web se fait via des terminaux mobiles… Il est indispensable d’adapter les sites web aux smartphones, tout en continuant de considérer les autres supports comme la tablette ou le desktop (ordinateur).

Si à l’origine on développait le site en version desktop puis on le déclinait pour les tablettes et mobiles, on effectue aujourd’hui le processus inverse.

Le code CSS initial va donc styliser notre page pour le mobile et nos media-queries vont venir le décliner pour des appareils plus larges (tablettes, desktop…). Concrètement, cela ne change rien au design final. Le Mobile First est surtout une affaire de considération, de point de vue.

Côté règles CSS, on écrira alors la plupart du temps nos media-queries avec min-width ou l’opérateur >=, en pensant « écran qui s’élargit ».

copié !
/* MOBILE (+ TABLET PORTRAIT) */
#demo {
	width: 100%;
}

/* TABLET LANDSCAPE */
@media screen and (min-width: 768px) {
	#demo {
		width: 80%;
	}
}

/* LAPTOP */
@media screen and (min-width: 1024px) {
	#demo {
		width: 50%;
	}
}

/* DESKTOP */
@media screen and (min-width: 1280px) {
	#demo {
		width: 25%;
	}
}

Ici, notre image identifiée par l’id #demo sera en pleine largeur (100%) sur mobile et verra peu à peu la proportion d’espace qu’elle occupe diminuer sur des résolutions supérieures (768px, 1024px et 1280px).

Le Mobile First n'est pas une règle absolue

Un Desktop First fera par exemple parfaitement l’affaire si :

  • Vous développez un tableau de bord à destination des équipes commerciales d’une entreprise travaillant exclusivement sur ordinateur.
  • Vous développez un écran affichant les arrivés / départs de vol pour les TV d’un aéroport.
  • Etc.

Ou même encore un Tablet First si vous développez une application de contrôle qualité spécialement conçue pour l’industrie automobile, offrant une interface intuitive sur tablette pour les opérateurs.