With Vuetify you can control the layout of your application depending on the window size. That can be achieved for example by using specific grid props or helper classes (i.e. display) that will target particular breakpoint. Vuetify provides 5 predefined breakpoints defined as described below, but you can easily change them to meet your needs.
| 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 преобразует доступные точки останова в доступный объект из вашего приложения. Это позволит вам назначать / применять определённые свойства и атрибуты на основе размера viewport. Доступ к объекту можно получить из:
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:
Этот объект содержит те же семантические свойства, которые вы уже использовали для использования в grid Давайте попробуем пример реального мира. У вас есть компонент v-dialog , который вы хотите преобразовать в full-screen на мобильных устройствах. Обычно вам нужно привязывать наблюдателей к размеру viewport и/или проверять каждый раз, когда загружается страница.
Это много шаблонов для написания. Даже если вы решите использовать встроенную директиву v-resize, вам все равно придётся определять метод изменения размера. С объектом breakpoint вы можете полностью пропустить эту логику и вернуться к созданию своего приложения.
We can simplify this process by simply checking the value of the mobile property on the $vuetify.breakpoint object.