Découvrez comment bien structurer votre projet pour qu'il soit facilement responsive. Ces astuces vous feront gagner du temps de production.

Ajuster le contenu automatiquement avec Flexbox

Le composant Flexbox est un conteneur qui permet d'adapter automatiquement sa taille de défilement en fonction de son contenu et de disposer selon un axe principal (horizontal ou vertical) ses objets selon un même espacement.

Il est automatiquement Ajusté (Straight to Fit) ce qui permet de gérer la position des objets "enfant" sans se soucier du responsive. On aura toujours 5 px entre les éléments, peu-importe leur changement de taille. Le changement de taille est décidé par les éléments eux-mêmes.

Placez vos objets à l'intérieur. Choisissez la marge entre les éléments et l'orientation (vertical ou horizontal). Flexbox vous permet également créer une grille : il suffit de spécifier la propriété Wrap au container pour que les éléments se disposent en plusieurs lignes si nécessaire.

flexbox.gif

 

Mettre un fond qui s'adapte automatiquement

Une des astuces pour créer simplement une mise en page responsive est d'adapter le fond à la taille de l'écran.

Si le fond est une forme, vous pouvez l'étirer directement.

Si votre fond est une image, il faut la mettre en mode Zoomé pour conserver le ratio de l'image et s'assurer que l'image remplit l'écran parfaitement, quitte à dépasser.

responsive_background.gif

Concernant l'image, il faut maintenir sa proportion. Choisissez la partie recadrée de l'image pour vous assurer de ne pas avoir d'espace et le mode Zoomé.

Centrer des objets sur toutes les tailles d'écran

Si votre fond est responsive, vous pouvez centrer tous vos objets et conserver ainsi votre mise en page d'origine.

Groupez tous vos objets ensemble. La taille du groupe est importante car c'est lui qui sera centré dans la page. Choisissez l'option Ajusté et une position centrale grâce aux options Taille & Position Dynamiques

galerie_en_option_Ajuste_.png

Le contenu est groupé ou comme ici placé dans un container (Galerie). L'option Ajusté est activée.

 

objets_enfant_en_Ajuste_.png

Placez les objets "enfants" en option Ajusté 

 

center_objects.gif

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 1 sur 1

Créez des apps et expériences interactives sans ligne de code

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

S'inscrire (gratuit)