Apprendre CSS : Media Queries

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.

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.

En fonction du préfixe indiqué, on va passer dans un autre contexte et certaines règles CSS vont être amenées à changer.

Cela se fera avec l’usage de l’opérateur logique and.

Borne minimale min-width

Le préfixe min- indique que l’on passe au-dessus du point de rupture.

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.

/* > 768px */
@media screen and (min-width: 768px) {
	/* Code CSS... */
}

Borne maximale max-width

Le préfixe max- indique que l’on passe au-dessous du point de rupture.

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

/* < 1280px */
@media screen and (max-width: 1280px) {
	/* Code CSS... */
}

Intervalle

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.

/* Entre 768px et 1024px */
@media screen and (min-width: 768px) and (max-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, en pensant « écran qui s’élargit ».

/* 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).