Mit Vuetify können Sie das Layout Ihrer Anwendung je nach Fenstergröße anpassen. Dies kann beispielsweise durch Verwendung bestimmter grid-Props oder Hilfsklassen erreicht werden (z.B. display), die einen bestimmten Haltepunkt anvisieren. Wie unten beschrieben bietet Vuetify fünf vordefinierte Haltepunkte an, die Sie aber ganz einfach an Ihre Bedürfnisse anpassen können.
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Vuetify wandelt die verfügbaren Haltepunkte in ein Objekt um, das aus Ihrer Anwendung zugänglich ist. Dies erlaubt Ihnen, basierend auf der Viewport-Größe bestimmte Eigenschaften und Attribute zuzuweisen/anzuwenden. Das Objekt ist unter $vuetify.breakpoint verfügbar.
You can define your own breakpoint threshold pixel values, but it is currently a two-step process: 1. To update the styles you will have to override the $grid-breakpoints SASS variables (please see SASS variables). 2. To use the same values on the javascript side of things you must pass them during the application bootstrap like so:
Probieren wir ein Beispiel aus der realen Welt. Sie haben eine v-dialog-Komponente, die Sie in einen *full-screen-Dialog auf mobilen Geräten konvertieren möchten. Normalerweise müssten Sie Watcher für die Größe des Viewports binden und/oder überprüfen, wann die Seite geladen wird.
Das ist eine Menge Boilerplate zu schreiben. Auch wenn Sie die eingebaute v-resize-Direktive verwenden, müssen Sie trotzdem eine Methode zum Anpassen der Größe definieren. Mit dem breakpoint-Objekt können Sie diese Logik komplett überspringen und direkt zum Aufbau Ihrer Anwendung kommen.
We can simplify this process by simply checking the value of the mobile property on the $vuetify.breakpoint object.