Tailles d'écran et appareils

Les points de rupture (également appelés tailles d'écran) sont des plages de pixels qui correspondent à la largeur de différents appareils, tels que desktop, tablette et mobile. Lorsque la largeur d'un appareil se situe dans une plage de pixels prédéfinie, la présentation du site est ajustée de manière à ce que le contenu et la conception soient optimisés pour la taille et l'orientation de l'appareil. Par exemple, si je consulte un site sur un ordinateur desktop, je peux voir le menu complet du site, mais lorsque je consulte le site sur mon appareil mobile, je vois un menu hamburger à la place.

Les points d'arrêt proposés dans l'éditeur sont les suivants :

Si vous modifiez la conception, la mise en page ou le contenu du point d'arrêt par défaut desktop, les changements sont automatiquement appliqués aux autres points d'arrêt. Si vous modifiez le contenu, par exemple en ajoutant une page widget, en modifiant le texte ou en ajoutant ou supprimant une section, la modification s'applique automatiquement à tous les autres points d'arrêt, quel que soit le point d'arrêt sur lequel la modification a été effectuée. Par exemple, si vous ajoutez une adresse widget au point d'arrêt de la tablette, l'adresse widget sera également ajoutée à tous les autres points d'arrêt.

Toutefois, si vous modifiez la position ou la taille d' un élément sur des points d'arrêt spécifiques, les modifications ne s'appliqueront pas aux autres points d'arrêt. Par exemple, si vous modifiez la taille d'un élément sur le point d'arrêt mobile, la modification ne s'appliquera qu'aux points d'arrêt mobile et paysage mobile et à aucun autre point d'arrêt.

Passer d'une vue de l'appareil à l'autre

Les sites Web responsive fonctionnent sur ordinateur, tablette et mobile. C'est pour cela que notre éditeur responsive vous permet de prévisualiser chaque affichage du site pendant l'édition. Vous pouvez ainsi vérifier comment apparaît votre site sur différents appareils avant de le publier, ce qui garantit à vos clients une expérience positive quel que soit l'appareil qu'ils utilisent pour consulter le site.

Pour basculer entre les différents affichages, cliquez sur l'un des boutons de l'appareil dans la barre de navigation en haut de l'écran :

Les différents affichages de l'appareil ne correspondent pas à des versions distinctes de votre site. La suppression d'un élément dans un affichage (mobile, par exemple) supprime cet élément de l'ensemble du site (ordinateur, tablette, mobile). Au lieu de le supprimer, effectuez un clic droit sur l'élément et choisissez de le masquer sur un appareil spécifique.

La prévisualisation des appareils n'est pas toujours représentative de ce qui s'affiche réellement sur un appareil. Les caractéristiques telles que les polices, la taille de la fenêtre de l'appareil, l'interface utilisateur ou encore le comportement du navigateur peuvent rendre ces affichages plus ou moins inexacts. Pour visualiser la version la plus précise du site, utilisez un appareil réel.