Ionic - 8.6 Dimensionner une grille réactive avec les breakpoints
Une page doit s'afficher correctement sur un téléphone comme sur un ordinateur. Dans une grille Ionic, les colonnes peuvent donc changer de taille selon la largeur de l'écran. Cette leçon explique les points d'arrêt, appelés breakpoints, et la façon de les utiliser sur les colonnes.
Comprendre les points d'arrêt
Les points d'arrêt se nomment xs, sm, md, lg et xl. Chacun correspond à une largeur d'écran en pixels. La vidéo cite le point md, qui s'active à partir de 768 pixels de large.
Une taille sans préfixe s'applique à tous les écrans. Avec un préfixe comme md, la taille ne change qu'à partir du point d'arrêt indiqué.
Adapter les colonnes à l'écran
La vidéo applique une taille sm de 4 sur les deux premières colonnes, et une taille md de 2. Le résultat change au point d'arrêt indiqué, et non de façon continue.
Quand l'écran ne correspond à aucun point d'arrêt précisé, la taille sans préfixe s'applique. Chaque colonne se règle séparément, et modifier l'une n'affecte pas les autres.
<ion-col size-sm="4" size-md="2">En résumé
Les colonnes Ionic peuvent changer de taille selon la largeur de l'écran. Les points d'arrêt xs, sm, md, lg et xl déclenchent ces changements. Une taille sans préfixe reste la valeur par défaut. Chaque colonne se règle séparément, ce qui permet d'adapter finement la mise en page.
Points clés
- Les points d'arrêt xs, sm, md, lg et xl correspondent à des largeurs d'écran.
- Le point md commence à 768 pixels, selon la vidéo.
- Une taille sans préfixe s'applique à tous les écrans.
- Un préfixe comme md n'active la règle qu'à partir du point d'arrêt.
- Chaque colonne peut avoir sa propre taille.
Questions fréquentes
Qu'est-ce qu'un point d'arrêt ?
C'est une largeur d'écran précise, à partir de laquelle une règle de taille s'applique. Ionic en prévoit cinq.
Pourquoi la mise en page ne change-t-elle pas en réduisant la fenêtre ?
Le changement n'a lieu que lorsque l'écran atteint le point d'arrêt indiqué. Dans la vidéo, le point md correspond à 768 pixels.
Faut-il définir toutes les tailles ?
Non. Une taille sans préfixe couvre les écrans qui ne correspondent à aucun point d'arrêt précis.