Design réactif
Une page est lue sur des écrans de téléphone, des tablettes et des moniteurs d'ordinateur. Le design réactif signifie qu'une seule page s'adapte à chacune de ces largeurs, au lieu de vous faire construire et maintenir une version distincte pour chacune. Le constructeur prévisualise votre contenu à trois largeurs et vous laisse définir des valeurs différentes à chacune.
Modes d'aperçu par appareil
Largeurs de colonnes par appareil
La largeur des colonnes suit une grille de 12 unités, une colonne réglée sur 6 occupe donc la moitié de la section et une colonne réglée sur 4 en occupe un tiers. La largeur accepte une valeur distincte à chaque largeur d'appareil, ce qui permet à une même rangée de colonnes de changer de forme entre un ordinateur et un téléphone.
Pour définir une largeur pour un appareil, sélectionnez la colonne et cliquez sur l'icône d'appareil à côté du champ de largeur, puis choisissez le point de rupture. Une valeur définie sur ordinateur s'applique à la tablette et au mobile tant que vous n'en définissez pas une autre, vous ne touchez donc qu'aux points de rupture qui doivent différer.
Champs adaptatifs
La marge, la marge interne, le rayon de bordure et la largeur portent tous une icône d'appareil. Tout champ muni de cette icône accepte une valeur distincte par point de rupture.
Masquer des blocs par appareil
Masquer un élément sur un écran étroit est parfois une meilleure réponse que de le réduire. Une grande image décorative peut disparaître de la mise en page téléphone pour que le message à côté garde l'écran. Chaque bloc, colonne et section porte des commandes de visibilité, dans le panneau Styles avancés sous Responsive, avec un interrupteur distinct pour l'ordinateur, la tablette et le mobile.
Interrupteurs de visibilité
Un interrupteur par point de rupture. Désactivez un bloc aux largeurs où il gêne et laissez-le actif aux autres.
Tester vos pages sur tous les appareils
Modèles responsifs courants
Habitudes mobile-first
Dépannage du design réactif
Vérifiez les interrupteurs de visibilité Responsive de ce bloc dans le panneau Styles avancés. Si le bloc y est visible, vérifiez la colonne et la section qui le contiennent, car masquer un conteneur masque tout ce qu'il renferme.
Passez au point de rupture où le chevauchement se produit, puis réduisez la largeur, la marge ou la marge interne du bloc à ce point de rupture. La mise en page pour ordinateur conserve les valeurs qu'elle a déjà.
Passez en mode mobile et lisez la largeur de la colonne. Une colonne qui affiche encore 6/12 partage la rangée avec sa voisine. Réglez-la sur 12/12 et elle occupe toute la largeur sur sa propre ligne.