Pour en savoir plus sur la création d'un site responsive, consultez l'article Mode responsive (tablette).
Un point d'interruption correspond à la taille à laquelle le design s'ajuste pour une largeur d'écran donnée. Les points d'interruption permettent d'obtenir un design responsive au fur et à mesure des modifications. Les points d'interruption par défaut dans DudaFlex 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)
Pour obtenir les meilleurs résultats, vérifiez les modifications des points d'interruption mobiles sur un appareil mobile, et non en modifiant la taille de votre écran sur ordinateur.
Vous pouvez passer d'un point d'interruption à un autre en haut de la page en cliquant sur les différentes vues.
Les modifications apportées au point d'interruption principal (desktop) sont répercutées sur tous les points d'interruption. Cependant, si vous devez apporter des changements à la position ou à la taille des éléments (modifications non structurelles) pour certains points d'interruption (par exemple, les mobiles en orientation paysage), ces modifications ne seront pas reflétées sur les autres modes. Les modifications apportées au point d'interruption mobile (portrait) affectent également le point d'interruption mobile en orientation paysage.
Modifications structurelles
Les modifications structurelles apportées à n'importe quel point d'interruption sont reflétées 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. Voici des exemples de modifications structurelles :
Supprimer ou ajouter du contenu
Déplacer un widget dans une flexbox
Retirer un widget d'une flexbox pour le placer sur la grille
Supprimer un widget dans un conteneur
Et bien plus encore
Masquer sur un point d'interruption
Vous souhaitez peut-être masquer certains éléments sur des points d'interruption spécifiques (par exemple, masquer une image sur les appareils mobiles).
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.
- Dans le panneau Calques, cliquez sur le bouton Masquer sur ce point d'interruption à côté de l'élément.
Si vous masquez un élément qui contient d'autres éléments imbriqués (par exemple, un conteneur avec deux widgets Bouton), tous les éléments imbriqués seront également masqués sur le point d'interruption.
Pour afficher un élément masqué, accédez au panneau Calques et cliquez sur Afficher sur ce point d'interruption à côté de l'élément masqué.
Masquer des éléments sur le point d'interruption principal n'affecte pas les autres points d'interruption. Par exemple, un bouton masqué sur le point d'interruption principal apparaît toujours sur le point d'interruption pour les tablettes (et tous les autres points d'interruption).