Points de rupture

Un point de rupture est une largeur d'écran à laquelle votre design change. Au lieu de construire une mise en page fixe en espérant qu'elle fonctionne partout, vous définissez des largeurs spécifiques où la mise en page doit s'adapter -- empiler des colonnes, redimensionner le texte ou masquer des éléments. Silex utilise le DeviceManager pour gérer les points de rupture, et vous basculez entre eux à l'aide des boutons de prévisualisation d'appareil dans la barre d'outils supérieure.

Deux points à garder à l'esprit :

• Les points de rupture fonctionnent de haut en bas. La vue desktop est votre base. Les styles que vous définissez aux points de rupture plus étroits remplacent les styles desktop, mais uniquement à cette largeur et en dessous.
• Vous ne redimensionnez pas le navigateur. Vous demandez à l'éditeur de vous montrer l'apparence du site à une largeur spécifique. Les boutons d'appareil simulent les tailles d'écran à l'intérieur du canvas.

Comment fonctionnent les points de rupture dans Silex

Silex suit une approche desktop-first. Vos styles par défaut s'appliquent à toutes les tailles d'écran. Quand vous sélectionnez un appareil plus étroit dans la barre d'outils, vous ajoutez des surcharges à l'intérieur d'une règle @media qui ne s'active que lorsque le viewport est à cette largeur ou en dessous.

En coulisses, chaque point de rupture génère une media query max-width. Par exemple, si vous définissez un point de rupture tablette à 768px, tout style que vous définissez pendant que cet appareil est actif est encapsulé dans @media (max-width: 768px).

Cela signifie :

• Les styles définis sur l'appareil desktop n'ont pas de media query -- ils s'appliquent partout.
• Les styles définis sur les appareils plus petits ne se déclenchent que lorsque l'écran est suffisamment étroit.
• Si vous ne surchargez pas une propriété à un point de rupture plus petit, la valeur desktop persiste.

Utiliser le menu déroulant de prévisualisation par appareil

La prévisualisation par appareil est un menu déroulant dans la barre d'outils supérieure, à côté des contrôles annuler/rétablir. Il contient quatre appareils : Desktop, Tablet, Mobile Landscape et Mobile Portrait. En sélectionner un redimensionne le canvas à cette largeur pour que vous puissiez voir et modifier la mise en page à cette taille.

Quand vous sélectionnez un appareil et modifiez un style dans le Style Manager, cette modification est limitée à la media query correspondante. Le Style Manager indique quel appareil vous éditez actuellement -- faites-y attention avant de faire des modifications.

Pour ajouter ou ajuster des styles spécifiques à un point de rupture :

1. Sélectionnez l'appareil dans le menu déroulant pour la taille d'écran que vous voulez cibler
2. Sélectionnez l'élément que vous voulez ajuster
3. Modifiez ses styles dans le Style Manager -- ces modifications ne s'appliquent qu'à ce point de rupture et en dessous
4. Repassez sur l'appareil desktop pour confirmer que vos styles de base sont intacts

Choisir vos points de rupture

Les appareils par défaut dans le menu déroulant correspondent à ces points de rupture :

Appareil (dans le menu déroulant)	Largeur typique
Desktop	1200px et au-dessus (base -- pas de media query)
Tablet	768px
Mobile Landscape	576px
Mobile Portrait	480px ou moins

Ce sont les quatre appareils disponibles dans le menu déroulant de prévisualisation par appareil. Commencez par votre design desktop, puis vérifiez son apparence à chaque point de rupture plus petit. Ne surchargez les styles qu'aux points de rupture où la mise en page doit changer.

Un guide pratique : redimensionnez le canvas lentement. Là où la mise en page commence à poser problème -- le texte déborde, les éléments se chevauchent, les espaces blancs deviennent gênants -- c'est là que vous avez besoin d'un point de rupture.

Quoi ajuster à chaque point de rupture

Les ajustements les plus courants aux points de rupture plus étroits :

• Flex-direction : Passer d'une ligne à une colonne pour que les éléments côte à côte s'empilent verticalement.
• Font-size : Réduire la taille des titres pour qu'ils ne dominent pas les petits écrans.
• Padding et Margin : Resserrer l'espacement. L'espace blanc généreux sur desktop peut sembler gaspillé sur mobile.
• Display : Masquer les éléments décoratifs avec display: none sur mobile, ou afficher des éléments réservés au mobile masqués sur desktop.
• Width : Définir les barres latérales à largeur fixe sur 100% pour qu'elles occupent tout l'écran sur les petits appareils.
• Column-gap et Row-gap : Réduire les espaces entre les éléments.

Desktop-first vs mobile-first

Silex utilise un modèle desktop-first : des media queries max-width qui surchargent les styles de base (desktop) aux écrans plus étroits. Cela signifie que vous concevez d'abord l'expérience desktop complète, puis simplifiez pour les appareils plus petits.

L'alternative -- mobile-first -- part des styles mobiles et ajoute de la complexité aux écrans plus larges avec des requêtes min-width. Les deux approches sont valides en CSS, mais le DeviceManager de Silex génère des requêtes max-width, donc le flux de travail desktop-first est le choix naturel.

Si vous êtes plus à l'aise en pensant mobile-first, vous pouvez toujours commencer par esquisser votre mise en page mobile conceptuellement, puis la construire comme base desktop en sachant que vous ajusterez l'espacement et la mise en page aux points de rupture plus larges. L'essentiel est la cohérence -- choisissez une approche et gardez-la sur l'ensemble du site.

Styles spécifiques aux points de rupture dans le Style Manager

Quand vous changez d'appareil, le contexte du Style Manager change. Vous remarquerez que :

• Les propriétés que vous n'avez pas surchargées au point de rupture actuel affichent la valeur desktop héritée dans un style atténué.
• Les propriétés que vous modifiez à ce point de rupture apparaissent avec leur nouvelle valeur.
• Supprimer une surcharge spécifique à un point de rupture restaure la valeur desktop héritée.

Cet héritage est automatique. Vous n'avez pas besoin de ressaisir chaque style à chaque point de rupture -- uniquement ceux qui doivent changer.

Erreurs courantes

• Modifier les styles sur le mauvais appareil. Vérifiez toujours quel appareil est actif avant de modifier les styles. Si vous définissez accidentellement une taille de police mobile alors que vous êtes sur l'appareil desktop, cela affectera toutes les tailles d'écran.
• Ajouter trop de points de rupture. Chaque point de rupture ajoute de la maintenance. Si une mise en page fonctionne à 768px et 480px, vous n'avez probablement pas besoin de 576px en plus.
• Définir toutes les propriétés à chaque point de rupture. Ne surchargez que ce qui doit changer. Laissez l'héritage faire le reste.
• Oublier la balise meta viewport. Sans <meta name="viewport" content="width=device-width, initial-scale=1.0">, les navigateurs mobiles rendent la page à la largeur desktop et dézooment. Silex ajoute cette balise automatiquement lors de la publication.
• Utiliser des largeurs fixes en pixels sur les conteneurs. Un div défini à width: 960px débordera sur tout écran plus étroit que 960px. Utilisez max-width ou des largeurs en pourcentage sur les conteneurs extérieurs.

En savoir plus

• MDN : Utiliser les media queries -- référence complète sur les règles @media
• MDN : Design responsive -- guide complet des techniques responsives
• Techniques responsives -- unités relatives et dimensionnement fluide dans Silex
• Tester sur différents appareils -- prévisualiser vos mises en page responsives
• Flexbox -- combiner les mises en page flex avec les points de rupture
• Le modèle de boîte -- comprendre comment le padding et le margin interagissent avec le dimensionnement responsive

---

Avancé : points de rupture personnalisés et détails des media queries

Comment GrapesJS stocke les points de rupture

Chaque appareil dans le DeviceManager a un name, une width optionnelle (la largeur de prévisualisation du canvas) et un widthMedia (la valeur max-width utilisée dans la media query). L'appareil de base a un widthMedia vide, ce qui signifie pas de media query -- les styles s'appliquent à toutes les tailles.

Media queries qui se chevauchent

Comme Silex utilise max-width, les points de rupture se propagent vers le bas. Un style défini à 768px s'applique à 768px et tout ce qui est plus étroit. Si vous définissez aussi une valeur différente à 480px, celle-ci prend la priorité en dessous de 480px. Le navigateur choisit la requête correspondante la plus spécifique.

La balise meta viewport

Silex inclut automatiquement <meta name="viewport" content="width=device-width, initial-scale=1.0"> dans les pages publiées. Cela indique aux navigateurs mobiles d'utiliser la largeur réelle de l'appareil au lieu d'un viewport virtuel de 980px. Sans elle, les media queries ne se déclencheraient jamais sur les téléphones car le navigateur signalerait un viewport de largeur desktop.

Variables CSS selon les points de rupture

Si vous utilisez des Variables CSS, vous pouvez définir des valeurs différentes pour la même variable à différents points de rupture. Le panneau CSS Variables prend en charge les surcharges par appareil -- par exemple, --spacing-large pourrait valoir 48px sur desktop et 24px sur mobile. C'est un moyen puissant de rendre tout votre système d'espacement responsive avec un effort minimal.

Référence : unités disponibles pour les valeurs responsives

En définissant les valeurs de propriétés dans le Style Manager, Silex prend en charge ces unités :

Unité	Description
px	Pixels absolus. Taille fixe quel que soit le contexte.
%	Pourcentage de la dimension correspondante de l'élément parent.
em	Relatif à la taille de police de l'élément.
rem	Relatif à la taille de police de la racine (html). Cohérent sur toute la page.
vh	1% de la hauteur du viewport.
vw	1% de la largeur du viewport.
cqi	1% de la taille en ligne du conteneur (unité de requête de conteneur).
cqb	1% de la taille en bloc du conteneur (unité de requête de conteneur).
cqw	1% de la largeur du conteneur (unité de requête de conteneur).
cqh	1% de la hauteur du conteneur (unité de requête de conteneur).
cqmin	Le plus petit entre cqi et cqb.
cqmax	Le plus grand entre cqi et cqb.

Pour le design responsive, préférez les unités relatives (%, em, rem, vw, vh) aux px fixes quand c'est possible. Consultez Techniques responsives pour des conseils pratiques sur quand utiliser chaque unité.

---

Quiz

Q1 : Vous définissez la taille de police d'un titre à 48px sur desktop. Sur l'appareil tablette (768px), vous ne la changez pas. Quelle taille de police a le titre sur un écran de 768px ?

• A) La valeur par défaut du navigateur (généralement 16px)
• B) 48px, héritée des styles desktop
• C) 0 -- vous devez la définir à chaque point de rupture

Réponse

B) 48px, héritée des styles desktop -- en desktop-first, les styles de base s'appliquent partout sauf s'ils sont surchargés à un point de rupture spécifique.

Q2 : Vous voulez une mise en page à trois colonnes sur desktop qui devient une seule colonne sur téléphone. Quelle est l'approche la plus efficace ?

• A) Définir Flex-direction sur row sur desktop, puis le surcharger en column au point de rupture mobile
• B) Créer deux sections séparées et en masquer une sur chaque appareil
• C) Définir les trois colonnes à width 33% et espérer qu'elles passent à la ligne

Réponse

A) Définir Flex-direction sur row sur desktop, puis le surcharger en column au point de rupture mobile -- Un seul conteneur, un seul changement de mise en page au point de rupture. Propre et maintenable.

Q3 : Vous avez accidentellement défini du padding sur l'appareil desktop alors que vous vouliez le définir uniquement pour le mobile. Comment corriger ?

• A) Passer sur l'appareil mobile et supprimer le padding là
• B) Passer sur l'appareil desktop et supprimer le padding, puis passer sur mobile et l'ajouter là
• C) Supprimer l'élément et recommencer

Réponse

B) Passer sur l'appareil desktop et supprimer le padding, puis passer sur mobile et l'ajouter là -- Les styles desktop sont la base. Vous devez d'abord corriger la base, puis ajouter la surcharge là où vous la voulez.

Q4 : Votre site a bonne mine dans l'éditeur à chaque point de rupture, mais sur un vrai téléphone la mise en page est minuscule et dézoomée. Quel est probablement le problème ?

• A) Les points de rupture sont définis aux mauvaises largeurs
• B) La balise meta viewport est manquante
• C) Vous avez utilisé les mauvaises unités CSS

Réponse

B) La balise meta viewport est manquante -- Sans la balise meta viewport, les navigateurs mobiles font le rendu à une largeur desktop virtuelle. Silex l'ajoute automatiquement lors de la publication, mais si vous testez du HTML brut vous devez vérifier qu'elle est présente.

Q5 : Vous avez des points de rupture à 1024px, 768px et 480px. À quelles largeurs un style défini au point de rupture 768px s'applique-t-il ?

• A) Uniquement exactement à 768px
• B) De 769px à 1024px
• C) À 768px et tout ce qui est plus étroit (y compris 480px), sauf si surchargé à 480px

Réponse

C) À 768px et tout ce qui est plus étroit (y compris 480px), sauf si surchargé à 480px -- Une media query max-width s'active à cette largeur et en dessous. Un point de rupture plus spécifique à 480px prendrait la priorité pour les écrans de 480px et moins.