Objectif
Il est parfois nécessaire de prévoir des affichages différents selon la taille de l’écran de l’utilisateur de l’application: téléphone, tablette, laptop, …
Une application ainsi construite est qualifiée de Responsive
Les solutions techniques reposent sur la possibilité qu’offre le CSS d’introduire la taille des écrans dans les sélecteurs. Les différents frameworks CSS/JS ont construit des outils permettant de simplifier cette mise en oeuvre, principalement sur le système de grille.
Cette page présente la mise en oeuvre simple d’un écran responsive avec Vuetify 2.x
Remarque: Par rapport à la verison 1.x, la version 2.x de Vuetify a apporté des modifications dans les noms de balises et des attributs a évolué. Toutefois, les concepts restent les même.
Breakpoints
Vuetify défini plusieurs tailles d’écrans. Seule les tailles suivantes doivent être retenues sur les applications SEDOO
- xs (téléphone): < 600px
- sm (tablette): 600px > < 960px
- md (autres) > 960px >
Principes
Objet $vuetify.breakpoint
this.$vuetify.breakpoint