Aperçu des points d'interruption
Les points d'interruption sont des plages de pixels qui correspondent à la largeur des différents appareils, tels que desktop, tablette et appareil mobile. Lorsque la largeur d'un dispositif se trouve dans la plage de pixels prédéfinie d'un point d'interruption, la disposition du site est ajustée de telle sorte que le contenu et la conception soient optimisés pour cette taille et cette orientation d'appareil. Par exemple, si je consulte un site sur un ordinateur de bureau (desktop), je peux afficher le menu complet du site, mais lorsque je consulte le site sur mon appareil mobile, je vois plutôt un menu latéral.
Cet article ne concerne que les utilisateurs qui ont commencé à utiliser Flex après le 18 juillet 2022. Si vous utilisez Flex version 1.0, consultez Points d'interruption Flex (1.0).
Points d'interruption Flex
Le principal point d'interruption de Flex est le desktop. Si vous modifiez la conception ou le contenu du point d'interruption du desktop, les modifications sont automatiquement appliquées aux autres points d'interruption du desktop, de la tablette et du mobile. Si vous modifiez du contenu, comme l'ajout d'un widget, le remplacement d'une image ou la modification de texte, la modification s'applique automatiquement à tous les autres points d'interruption, quel que soit le point d'interruption concerné par la modification.
Cependant, si vous modifiez la position ou la taille d'un élément sur des points d'interruption spécifiques, les modifications ne s'appliqueront pas aux autres points d'interruption. Par exemple, si vous modifiez la taille d'un élément sur le point d'interruption mobile, la modification ne s'appliquera qu'aux points d'interruption mobile et paysage mobile et à aucun autre point d'interruption.
Les points d'interruption par défaut dans Flex sont les suivants :
Bureau (1025 px – 1399 px)
Bureau étendu (à partir de 1400 px)
Tablette (768 px – 1024 px)
Mobile (jusqu'à 767 px)
Mobile format paysage (468 px – 767 px)
Nous vous conseillons de vérifier les modifications apportées aux points d'interruption mobiles sur un appareil mobile plutôt que de redimensionner un écran de desktop.
Vous pouvez passer d'un point d'interruption à un autre en haut de la page en cliquant sur les différentes vues.
Modifications structurelles
Les modifications structurelles apportées à n'importe quel point d'interruption se répercutent sur tous les autres points d'interruption. Lorsque vous apportez des modifications structurelles à un point d'interruption autre que le point d'interruption principal (desktop), un message d'avertissement apparaît pour vous informer que vos modifications affecteront tous les points d'interruption. Les modifications structurelles incluent des modifications de contenu ou de mise en page, telles que l'ajout ou la suppression de sections, de colonnes, de Flexbox, de widgets ou de grilles avancées.
Masquer sur un point d'interruption
Vous pouvez masquer certains éléments sur des points d'interruption spécifiques à partir du panneau de calques ou du menu flottant de l'élément. Par exemple, vous pouvez masquer une image sur les appareils mobiles et cela n'affectera pas les autres points d'interruption.
Si vous masquez un élément qui contient d'autres éléments imbriqués, tous les éléments imbriqués seront également masqués sur ce point d'interruption. Par exemple, si vous masquez une colonne Flex, cela masquera également les widgets de cette colonne Flex.
Pour masquer un élément sur un point d'interruption spécifique :
Passez au point d'interruption sur lequel vous souhaitez masquer l'élément en cliquant sur l'affichage dans la barre de navigation supérieure.
Cliquez sur l'élément que vous souhaitez masquer.
Cliquez sur l'icône des trois points horizontaux (
) dans le menu flottant et sélectionnez Masquer sur ce point d'interruption . Sinon, dans le panneau de calques, cliquez sur Masquer sur ce point d'interruption en regard de l’élément.
Remplacement des points d'interruption
Lorsque vous modifiez du contenu, vous pouvez effectuer la modification à partir de n'importe quel point d'interruption et elle se répercute sur tous les points d'interruption. Il y a toutefois certains cas où vous devez remplacer un point d'interruption. Par exemple, sur le point d'interruption principal, une image se trouve à droite d'un paragraphe, mais sur mobile, vous avez besoin que l'image soit en haut et le paragraphe en dessous.
Voici les modifications que vous pouvez apporter à un élément et où remplacer le point d'arrêt principal :
Alignement
Position
Taille
Espacement
Une fois que vous avez remplacé un point d'interruption, vous ne pouvez pas inverser la modification en changeant de style dans le point d’interruption principal sur le même objet.
