Les points de rupture

Un point de rupture est un moment où votre CSS change parce que le contexte change lui aussi. Le cas le plus courant, c'est la largeur de l'écran, mais il existe aussi d'autres critères comme l'orientation, le ratio, la résolution ou le type de média.

Le but n'est pas de réécrire tout votre site à chaque taille d'écran. Vous conservez une base commune, puis vous ajoutez des règles qui s'activent seulement dans certaines situations. C'est précisément le rôle de @media.

Utilisation des @media en CSS

Une règle @media permet d'appliquer du CSS uniquement si une condition est vraie. Tant que cette condition n'est pas remplie, le bloc n'est pas utilisé.

				
					.card{
						width: 25%;
					}

					@media (max-width: 800px){
						.card{
							width: 50%;
						}
					}
				
			

Ici, la règle située dans @media s'applique lorsque la largeur visible est de 800px ou moins. Le même élément garde donc un comportement normal sur grand écran, puis s'adapte sur un écran plus petit.

Sur cet exemple, le système de colonne passe de 4 à 2 quand la taille d'écran devient trop petite pour être lisible.

En pratique, on écrit souvent d'abord le style de base, puis on ajoute les ajustements responsive ensuite.

La base, définir une taille, hauteur, minimale ou maximale

Les critères les plus utilisés sont min-width et max-width. Ils servent à déclencher une règle à partir d'une largeur minimale ou maximale.

• max-width s'active jusqu'à une largeur donnée.
• min-width s'active à partir d'une largeur donnée.
• Il existe aussi min-height et max-height pour la hauteur.

				
					@media (max-width: 900px){
						.sidebar{
							display: none;
						}
					}

					@media (min-width: 1200px){
						.page{
							max-width: 1100px;
						}
					}

					@media (max-height: 500px){
						.hero{
							min-height: auto;
						}
					}
				
			

Pour un débutant, le plus simple est souvent de commencer avec max-width. Vous partez d'une mise en page confortable, puis vous réduisez ou simplifiez certaines zones quand l'espace devient trop petit.

Définir une orientation

Un appareil peut être en mode portrait ou en mode paysage. Cela peut être utile sur mobile ou tablette, surtout quand une interface prend beaucoup de largeur.

				
					@media (orientation: portrait){
						.galerie{
							grid-template-columns: 1fr;
						}
					}

					@media (orientation: landscape){
						.galerie{
							grid-template-columns: 1fr 1fr;
						}
					}
				
			

Ce critère ne remplace pas la largeur de l'écran. Il vient plutôt en complément quand l'orientation a un vrai impact sur le confort d'utilisation.

Définir un ratio

Le ratio, ou plus précisément le ratio d'aspect, compare la largeur et la hauteur de l'écran. En CSS, on le manipule avec aspect-ratio, min-aspect-ratio ou max-aspect-ratio.

				
					@media (min-aspect-ratio: 16/9){
						.video{
							max-width: 900px;
						}
					}

					@media (max-aspect-ratio: 4/3){
						.video{
							max-width: 100%;
						}
					}
				
			

Ce type de condition est plus spécifique. On le rencontre surtout quand une interface dépend fortement de la forme de l'écran, par exemple pour une vidéo, une application ou une galerie.

Définir un type de média

Une requête média peut aussi viser un type de média. Les plus connus sont screen pour les écrans et print pour l'impression.

				
					@media screen and (max-width: 700px){
						.menu{
							display: none;
						}
					}

					@media print{
						nav,
						footer{
							display: none;
						}
					}
				
			

Sur le web, vous utiliserez surtout screen et print. Le type seul ne suffit pas toujours, mais il peut être combiné avec d'autres conditions.

Les types de médias disponibles aujourd'hui sont les suivants :

• all : tous les types de médias.
• screen : les écrans d'ordinateur, de tablette, de téléphone et assimilés.
• print : l'aperçu et l'impression sur papier.
• speech : les synthèses vocales et lecteurs d'écran qui utilisent ce type de rendu.

Définir une résolution

La résolution permet de cibler la densité d'affichage, par exemple sur des écrans très fins. On utilise souvent min-resolution, avec des unités comme dpi, dppx ou dpcm.

• dpi signifie dots per inch.
• dppx signifie dots per px.
• dpcm signifie dots per centimeter.

				
					@media (min-resolution: 2dppx){
						.logo{
							background-image: url("logo@2x.png");
						}
					}
				
			

Ce genre de règle sert surtout à améliorer la netteté de certaines images ou icônes sur des écrans haute densité.

Utiliser plusieurs règles avec les opérateurs logiques

Vous pouvez combiner plusieurs conditions. L'opérateur le plus fréquent est and, qui signifie que toutes les conditions doivent être vraies.

				
					@media screen and (min-width: 700px) and (max-width: 1100px){
						.cards{
							grid-template-columns: 1fr 1fr;
						}
					}
				
			

Il existe aussi :

• la virgule ,, qui joue le rôle d'un "ou",
• not, qui inverse une condition,
• only, utilisé historiquement pour certains navigateurs plus anciens.

				
					@media (max-width: 500px), (orientation: portrait){
						.bloc{
							padding: 15px;
						}
					}
				
			

Attention ! Même si c'est possible, évitez de créer des conditions trop compliquées au début. Des règles simples sont souvent plus faciles à maintenir.

Exemple : adapter une grille en fonction de la taille du navigateur

Imaginons une grille de cartes. Sur un grand écran, trois colonnes fonctionnent bien. Sur un écran moyen, deux colonnes suffisent. Sur mobile, une seule colonne devient souvent plus lisible.

 						
							<section class="cartes">
								<article>Carte 1</article>
								<article>Carte 2</article>
								<article>Carte 3</article>
							</section>
						
					

						
							.cartes{
								display: grid;
								grid-template-columns: 1fr 1fr 1fr;
								gap: 20px;
							}

							@media (max-width: 900px){
								.cartes{
									grid-template-columns: 1fr 1fr;
								}
							}

							@media (max-width: 600px){
								.cartes{
									grid-template-columns: 1fr;
								}
							}
						
					

La grille peut passer de trois colonnes à deux, puis à une seule selon la largeur disponible.

Exemple : adapter la taille du texte

Le texte aussi peut être ajusté. Sur un très grand écran, un titre peut être plus imposant. Sur mobile, on réduit parfois sa taille pour éviter qu'il ne prenne trop de place.

 						
							<h1 class="hero_title">Bienvenue</h1>
							<p class="hero_text">
								Un texte d'introduction plus facile à lire.
							</p>
						
					

						
							.hero_title{
								font-size: 42px;
							}

							.hero_text{
								font-size: 20px;
							}

							@media (max-width: 700px){
								.hero_title{
									font-size: 30px;
								}

								.hero_text{
									font-size: 17px;
								}
							}
						
					

Sur un petit écran, réduire légèrement la taille du texte peut améliorer la lecture.

Retenez surtout ceci : un point de rupture n'est pas une valeur magique à recopier partout. C'est un moment où votre mise en page en a réellement besoin. Le bon réflexe consiste donc à observer quand le design devient moins confortable, puis à ajouter une règle @media claire et ciblée.