Techniques responsives¶

Les points de rupture gèrent les grands changements -- empiler des colonnes, masquer des éléments, changer les tailles de police. Mais entre les points de rupture, votre mise en page doit toujours bien se comporter. C'est là qu'interviennent les unités relatives, le dimensionnement fluide et les images flexibles. Ces techniques permettent à votre design de s'étirer et de se comprimer harmonieusement sur toutes les largeurs d'écran, pas seulement celles pour lesquelles vous avez défini des points de rupture.

Deux principes à retenir tout au long de cette page :

Les valeurs fixes créent des limites. Les valeurs relatives créent des plages. Un titre défini à 48px fait toujours 48px. Un titre défini à 3rem s'adapte si l'utilisateur change la taille de police de son navigateur.
Le meilleur design responsive nécessite moins de points de rupture, pas plus. Plus vos styles de base sont naturellement flexibles, moins vous avez besoin de surcharges spécifiques aux points de rupture.

Choisir la bonne unité¶

Silex prend en charge une large gamme d'unités CSS. Choisir la bonne est la décision responsive la plus déterminante que vous prendrez.

Pixels (px)¶

Px sont absolus. 16px fait toujours 16 pixels à l'écran. Utilisez-les pour les valeurs qui ne doivent véritablement pas changer -- une bordure de 1px, les dimensions d'une petite icône, le décalage d'une ombre.

Le problème : un conteneur de 960px de large déborde sur tout écran plus étroit que 960px. Pour les largeurs, hauteurs, paddings et tailles de police, les unités relatives fonctionnent presque toujours mieux.

Pourcentages (%)¶

Les pourcentages sont relatifs à l'élément parent. Un div défini avec Width à 50% prend la moitié de la largeur de son parent. Redimensionnez le parent et l'enfant suit.

Utilisez les pourcentages pour :

Les largeurs de conteneurs : width: 90% avec un max-width en pixels donne un conteneur fluide qui plafonne à une taille lisible.
Le Padding et le Margin horizontaux : padding: 0 5% garde un espace proportionnel à l'écran.

Attention : le padding vertical en pourcentage est calculé à partir de la largeur du parent, pas de sa hauteur. C'est une particularité CSS qui surprend souvent.

Em et rem¶

Em est relatif à la Font-size propre de l'élément. Si un élément a une taille de police de 16px, alors 1.5em = 24px. Cela rend em utile pour l'espacement qui doit s'adapter au texte -- le padding à l'intérieur d'un bouton, par exemple, reste proportionnel au libellé du bouton.

Rem est relatif à la taille de police de l'élément racine (html). La valeur par défaut du navigateur est 16px, donc 1rem = 16px sauf si vous changez la racine. Comme rem référence toujours la même base, c'est plus prévisible que em et évite l'effet de cumul (où les valeurs em imbriquées se multiplient).

Quand utiliser chacun : - rem pour les tailles de police, les valeurs d'espacement globales et tout ce qui doit être cohérent sur la page. - em pour l'espacement interne aux composants -- padding et margin qui doivent s'adapter à la taille du texte du composant.

Unités de viewport (vw, vh)¶

Vw vaut 1% de la largeur du viewport. Vh vaut 1% de la hauteur du viewport.

Utilisez vw pour les éléments qui doivent être une fraction de la largeur de l'écran quel que soit leur conteneur. Une section héro définie à height: 80vh remplit 80% de l'écran visible sur n'importe quel appareil.

Attention : vw inclut la largeur de la barre de défilement sur certains navigateurs, ce qui peut provoquer une barre de défilement horizontale. Utilisez width: 100% sur les conteneurs au lieu de 100vw.

Unités de requête de conteneur (cqi, cqb, cqw, cqh, cqmin, cqmax)¶

Ces unités plus récentes sont relatives à la taille d'un élément conteneur plutôt qu'au viewport. Elles nécessitent que le parent soit configuré comme contexte de requête de conteneur.

Unité	Relatif à
`cqi`	Taille en ligne (horizontale) du conteneur
`cqb`	Taille en bloc (verticale) du conteneur
`cqw`	Largeur du conteneur
`cqh`	Hauteur du conteneur
`cqmin`	Le plus petit entre `cqi` et `cqb`
`cqmax`	Le plus grand entre `cqi` et `cqb`

Les unités de requête de conteneur sont puissantes pour les composants réutilisables qui doivent s'adapter à leur conteneur, pas au viewport. Un composant carte avec font-size: 2cqi aura un texte qui s'adapte à la largeur de la carte, qu'elle soit dans une barre latérale ou une section pleine largeur.

Typographie fluide¶

Au lieu de définir une taille de police fixe et de la surcharger à chaque point de rupture, vous pouvez faire en sorte que le texte s'adapte progressivement avec le viewport.

L'approche la plus simple : définissez les tailles de police en rem sur l'appareil desktop, puis surchargez-les avec des valeurs rem plus petites à votre point de rupture mobile. Le texte fait un saut au point de rupture mais reste proportionnel autrement.

L'approche fluide : utilisez les unités vw pour que les tailles de police s'adaptent continuellement. Par exemple, un titre à 4vw fait toujours 4% de la largeur du viewport -- grand sur desktop, plus petit sur mobile, sans saut.

Le risque avec le vw pur est que le texte peut devenir trop petit sur les téléphones ou trop grand sur les écrans ultralarges. Combinez vw avec un minimum en utilisant la fonction CSS clamp(). Silex prend en charge clamp() dans les valeurs de propriétés -- tapez-le directement :

clamp(1.5rem, 4vw, 3rem)

Cela signifie : la taille de police est 4vw, mais jamais inférieure à 1.5rem ni supérieure à 3rem. Vous obtenez une mise à l'échelle fluide avec des limites raisonnables, et zéro point de rupture nécessaire pour cette propriété.

Espacement fluide¶

La même technique fonctionne pour Padding, Margin, Column-gap et Row-gap.

Une section avec padding: 5vw a un espacement généreux sur un grand écran et un espacement serré sur un téléphone -- automatiquement.

Si vous utilisez des Variables CSS, définissez votre échelle d'espacement comme variables sur :root et surchargez-les aux points de rupture. Chaque élément référençant var(--spacing-large) se met à jour en un seul endroit :

--spacing-large: 48px     /* desktop */
--spacing-large: 24px     /* au point de rupture mobile */

Images responsives¶

Les images sont l'une des sources les plus courantes de problèmes responsives. Une photo de 1200px de large débordera d'un écran de téléphone de 320px à moins que vous ne lui disiez de s'adapter.

La règle essentielle : définissez Max-width sur 100% pour les images. Cela garantit que l'image ne dépasse jamais la largeur de son conteneur tout en s'affichant à sa taille naturelle quand l'espace le permet.

Dans le Style Manager, sélectionnez l'image et définissez :

Max-width : 100%
Height : auto (pour maintenir le ratio d'aspect)

C'est la technique d'image responsive la plus efficace. Elle fonctionne sans aucun point de rupture.

Pour les images d'arrière-plan : utilisez Background-size défini sur cover ou contain. Cover remplit le conteneur et recadre si nécessaire. Contain fait tenir l'image entière à l'intérieur du conteneur avec un possible espace vide.

Vidéos et cartes responsives¶

Les vidéos et les cartes intégrées (iframes) nécessitent le même traitement que les images. Définissez Max-width sur 100% pour les éléments vidéo. Pour les iframes, encapsulez-les dans un conteneur div et contrôlez le dimensionnement via le conteneur.

Construire une mise en page fluide sans points de rupture¶

En combinant ces techniques, vous pouvez créer des mises en page qui n'ont presque pas besoin de points de rupture :

Conteneur : width: 90%, max-width: 1200px, centré avec margin: 0 auto
Grille de cartes : parent défini en Flex, Flex-wrap wrap, Column-gap 2vw, Row-gap 2vw. Chaque carte : Flex-basis 300px, Flex-grow 1
Typographie : titres à clamp(1.5rem, 4vw, 3rem), corps du texte à 1rem
Images : Max-width 100%, Height auto

Cette grille passe à la ligne naturellement. Le texte s'adapte progressivement. Les images s'ajustent à leurs conteneurs. Vous n'aurez peut-être besoin que d'un seul point de rupture pour faire passer une barre de navigation de l'horizontal au vertical.

Quand utiliser des points de rupture malgré tout¶

Les techniques fluides réduisent le besoin de points de rupture mais ne l'éliminent pas. Vous avez toujours besoin de points de rupture quand :

Une navigation horizontale doit devenir un menu hamburger sur mobile.
Une barre latérale doit passer sous le contenu principal.
Un élément doit être entièrement masqué sur les petits écrans.
Flex-direction doit passer de row à column.

L'objectif est de gérer l'adaptation progressive avec les unités fluides et de réserver les points de rupture pour les changements structurels. Consultez Points de rupture pour savoir comment les configurer.

Erreurs courantes¶

Utiliser px pour tout. La mise en page fonctionne sur votre écran mais casse sur toutes les autres tailles. Commencez par des unités relatives et n'utilisez px que pour les petites valeurs fixes.
Définir width: 100vw sur les conteneurs. Cela inclut la barre de défilement et provoque un défilement horizontal. Utilisez width: 100% à la place.
Oublier max-width sur les images. Une seule image surdimensionnée peut casser toute la mise en page sur mobile.
Utiliser em pour les tailles de police dans les éléments profondément imbriqués. Chaque niveau d'imbrication multiplie : 1.2em dans 1.2em dans 1.2em = bien plus grand que prévu. Utilisez rem pour les tailles de police.
Trop compliquer clamp(). Commencez simplement. clamp(1rem, 2.5vw, 2rem) est lisible. Ajouter des calculs à l'intérieur de clamp() rend la maintenance plus difficile.

En savoir plus¶

MDN : Valeurs et unités CSS -- référence complète de toutes les unités CSS
MDN : Images responsives -- les attributs srcset et sizes
MDN : CSS clamp() -- référence de la fonction clamp
Points de rupture -- configurer les surcharges spécifiques aux appareils
Tester sur différents appareils -- vérifier vos mises en page responsives
Flexbox -- techniques de mise en page qui s'associent au dimensionnement fluide
Système de design -- utiliser les Variables CSS pour des échelles d'espacement responsives

Avancé : combiner clamp avec les Variables CSS

Système d'espacement fluide avec variables¶

Vous pouvez définir une échelle d'espacement fluide complète en utilisant les Variables CSS et clamp() :

--spacing-xs:  clamp(4px, 0.5vw, 8px)
--spacing-sm:  clamp(8px, 1vw, 16px)
--spacing-md:  clamp(16px, 2vw, 32px)
--spacing-lg:  clamp(24px, 3vw, 48px)
--spacing-xl:  clamp(32px, 4vw, 64px)

Chaque élément utilisant var(--spacing-md) pour le padding obtient un espacement fluide qui varie entre 16px et 32px. Aucun point de rupture nécessaire pour l'espacement -- il s'adapte continuellement.

Échelle typographique fluide¶

De même, définissez une échelle typographique :

--text-sm:   clamp(0.875rem, 1vw, 1rem)
--text-base: clamp(1rem, 1.2vw, 1.125rem)
--text-lg:   clamp(1.25rem, 2vw, 1.5rem)
--text-xl:   clamp(1.5rem, 3vw, 2.25rem)
--text-2xl:  clamp(2rem, 4vw, 3rem)

Appliquez-les via le panneau CSS Variables (consultez Système de design) et toute la typographie de votre site réagit à la largeur du viewport.

Requêtes de conteneur pour la responsivité au niveau des composants¶

Les unités de requête de conteneur (cqi, cqb, etc.) permettent à un composant de réagir à son propre conteneur plutôt qu'au viewport. C'est utile quand le même composant apparaît dans des contextes de largeurs différentes -- une carte dans une barre latérale vs. une carte dans une grille pleine largeur.

Pour utiliser les requêtes de conteneur, l'élément parent a besoin de container-type: inline-size défini via du code personnalisé ou le Style Manager. Les enfants peuvent alors utiliser des unités basées sur cqi.

Référence : tableau comparatif des unités

Unité	Relatif à	Idéal pour	À éviter pour
`px`	Rien (absolu)	Bordures, ombres, petites valeurs fixes	Largeurs de conteneur, tailles de police, espacement
`%`	Élément parent	Largeurs de conteneur, padding horizontal	Tailles de police (difficile à prévoir)
`em`	Taille de police de l'élément	Espacement interne aux composants	Tailles de police dans les contextes imbriqués
`rem`	Taille de police racine	Tailles de police, espacement global	Valeurs qui doivent correspondre à la taille du parent
`vw`	Largeur du viewport	Typographie fluide, mises en page pleine largeur	Largeurs de conteneur (problème de barre de défilement)
`vh`	Hauteur du viewport	Sections héro, mises en page plein écran	La plupart des autres usages (la barre d'adresse mobile modifie vh)
`cqi`	Taille en ligne du conteneur	Dimensionnement responsive au niveau composant	Éléments sans parent conteneur de requête
`cqb`	Taille en bloc du conteneur	Adaptation verticale des composants	Rarement utile dans les mises en page horizontales
`cqw`	Largeur du conteneur	Identique à `cqi` en écriture horizontale	Identique à `cqi`
`cqh`	Hauteur du conteneur	Identique à `cqb` en écriture horizontale	Identique à `cqb`
`cqmin`	Le plus petit entre `cqi`/`cqb`	Mise à l'échelle quasi-carrée	Peu courant -- à tester soigneusement
`cqmax`	Le plus grand entre `cqi`/`cqb`	Mise à l'échelle sur l'axe dominant	Peu courant -- à tester soigneusement

Quiz¶

Q1 : Vous avez un titre à font-size: 48px. Sur un téléphone, il occupe la majeure partie de la largeur de l'écran. Quelle est la meilleure solution ?

A) Ajouter un point de rupture et définir la taille de police à 24px sur mobile
B) Changer la taille de police en clamp(1.5rem, 4vw, 3rem) pour qu'elle s'adapte progressivement
C) Définir la largeur du titre à 50%

Réponse

B) Changer la taille de police en clamp(1.5rem, 4vw, 3rem) pour qu'elle s'adapte progressivement -- Cela vous donne une adaptation fluide entre un minimum et un maximum sans avoir besoin d'un point de rupture. L'option A fonctionne mais crée un saut au point de rupture.

Q2 : Une image déborde de son conteneur sur mobile. Quelle propriété unique corrige cela ?

A) Width : 100%
B) Max-width : 100%
C) Display : none

Réponse

B) Max-width : 100% -- Cela empêche l'image de dépasser son conteneur tout en lui permettant de s'afficher à sa taille naturelle quand l'espace le permet. Width 100% forcerait l'image à toujours remplir le conteneur, étirant inutilement les petites images.

Q3 : Vous définissez padding: 2em sur un bouton à l'intérieur d'une carte, à l'intérieur d'une barre latérale. Le padding semble trop grand. Que se passe-t-il probablement ?

A) L'unité em se cumule à travers les tailles de police imbriquées
B) La taille de police du bouton est très grande
C) A ou B -- em est relatif à la taille de police propre de l'élément, qui peut être héritée de contextes imbriqués

Réponse

C) A ou B -- Si les éléments parents ont des tailles de police définies en em, la taille de police effective au niveau du bouton pourrait être plus grande que prévu, rendant les 2em de padding plus importants que voulu. Utiliser rem à la place donnerait une valeur prévisible basée sur la taille de police racine.

Q4 : Vous voulez un conteneur qui fait 90% de l'écran sur mobile mais jamais plus large que 1200px sur desktop. Comment configurer cela ?

A) Width 90% au point de rupture mobile, width 1200px sur desktop
B) Width 90% et Max-width 1200px, aucun point de rupture nécessaire
C) Width 1200px et Min-width 90%

Réponse

B) Width 90% et Max-width 1200px, aucun point de rupture nécessaire -- Le conteneur remplit 90% de son parent mais plafonne à 1200px. C'est fluide par défaut et ne nécessite aucun point de rupture.

Q5 : Pourquoi faut-il éviter width: 100vw sur un conteneur de page ?

A) Cela n'inclut pas le padding
B) Cela inclut la largeur de la barre de défilement, provoquant une barre de défilement horizontale
C) Cela ne fonctionne que sur mobile

Réponse

B) Cela inclut la largeur de la barre de défilement, provoquant une barre de défilement horizontale -- Sur les navigateurs qui affichent une barre de défilement, 100vw est plus large que la zone visible. Utilisez width: 100% à la place, qui respecte l'espace disponible.

Éditer cette page sur GitLab