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 adaptez la mise en page à des largeurs précises -- empiler des colonnes, redimensionner le texte ou masquer des éléments. Silex a quatre appareils aux points de rupture fixes, et vous basculez entre eux avec le menu déroulant des appareils 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. Le menu des appareils simule 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, tout style que vous définissez pendant que l'appareil Tablet est actif est encapsulé dans @media (max-width: 992px).

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 à gauche de la barre d'outils supérieure. Il contient quatre appareils : Desktop, Tablet, Mobile Landscape et Mobile Portrait. En sélectionner un rétrécit le canvas 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 sélecteur en haut du Style Manager indique le point de rupture que vous éditez, par exemple @992px devant le sélecteur sur Tablet -- 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 quatre appareils du menu déroulant ont ces points de rupture :

Appareil (dans le menu déroulant)	Les styles s'appliquent à	Largeur du canvas dans l'éditeur
Desktop	toutes les largeurs (base -- pas de media query)	toute la largeur
Tablet	992px et moins	770px
Mobile Landscape	768px et moins	568px
Mobile Portrait	480px et moins	320px

On ne peut pas ajouter d'appareil ni changer ces largeurs dans l'éditeur, et le canvas ne se redimensionne pas à la main. Commencez par votre design desktop, puis vérifiez son apparence sur chaque appareil plus petit. Ne surchargez les styles que sur les appareils où la mise en page doit changer.

Un guide pratique : passez d'un appareil à l'autre et regardez chacun. 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'une surcharge.

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.

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.
• 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é : 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 Tablet, vous ne la changez pas. Quelle taille de police a le titre sur un écran de 900px ?

• 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 : À quelles largeurs un style défini sur l'appareil Mobile Landscape (768px) s'applique-t-il ?

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

Réponse

C) À 768px et tout ce qui est plus étroit (y compris 480px), sauf si surchargé sur Mobile Portrait -- Une media query max-width s'active à cette largeur et en dessous. Un style défini sur Mobile Portrait (480px) prend la priorité pour les écrans de 480px et moins.