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.

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px*
Largelgdesktop1264px* > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

Объект точки останова

Vuetify преобразует доступные точки останова в доступный объект из вашего приложения. Это позволит вам назначать / применять определённые свойства и атрибуты на основе размера viewport. Доступ к объекту можно получить из:

Usage

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 stylus 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 вы можете полностью пропустить эту логику и вернуться к созданию своего приложения.

Edit this page on Github | Translate on Crowdin
Vuetify
МагазинДля бизнеса