Accueil » Comment gérer les résolutions ?

Comment gérer les résolutions ?

Afin d’optimiser vos applications pour une utilisation via tablettes et mobiles, vous devez veiller à tester vos applications dans les différentes résolutions que propose la plateforme.

Les résolutions

La plate-forme utilise le framework css Bootstrap pour gérer les résolutions d’écrans :

  • Smartphone en mode portrait : écrans inférieurs à 576 px
  • Smartphone en mode paysage : écrans jusqu’à 768 px
  • Tablettes : écrans jusqu’à 992 px
  • Ecrans 1 : écrans jusqu’à 1200 px
  • Ecrans 2 : écrans supérieurs jusqu’à 1200 px

Vous pouvez simuler une résolution directement en mode création grâce au switcher présent en haut à droite.

Manipuler les composants

Attention : pour bénécifier du paramètrage qui suit, vos composants doivent être :

  • soit dans un grille réactive
  • soit dans un formulaire

Chaque composant peut être parémétré de manière automonme dans l’écran.

Régler la largeur de vos composants

Comme pour Bootstrap, chaque grille responsive/formulaire est décomposée en 12 colonnes. Vous devez soit attribuer une largeur comprise entre 1 et 12 ou utiliser Automatique.

Automatique : répartit automatiquement la largeur des éléments sur la ligne.

Exemple :

  • Si vous mettez un composant en automatique sur une ligne, ce dernier prendra tout l’espace de la grille réactive.
  • Si vous mettez deux composants en automatique sur une ligne, ces dernier prendront chacun 50% de la grille réactive.
  • si vous mettez un composant avec une largeur de 3, la largeur prendra 25 % de la grille réactive. Vous pouvez placer 4 éléments sur cette ligne.
  • si vous mettez un composant avec une largeur de 6, la largeur prendra 50 % de la grille réactive. Vous pouvez placer 4 éléments sur cette ligne.
Choix des résolutions

Régler la visibilité de vos composants

Vous pouvez choisir de cacher certaines données quand la résolution devient trop petite. Pour cela, manipuler le switcher de visibilité :

Bon développement,