Breakpoints

Vuetify has a 12 point grid system. Built using flex-box, the grid is used to layout an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations. The props for grid components are actually classes that are derived from their defined properties. This allows you to easily specify these helper classes as props, while still providing the classes to be used anywhere.

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

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

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

Этот объект содержит те же семантические свойства, которые вы уже использовали для использования в grid Давайте попробуем пример реального мира. У вас есть компонент v-dialog , который вы хотите преобразовать в full-screen на мобильных устройствах. Обычно вам нужно привязывать наблюдателей к размеру viewport и/или проверять каждый раз, когда загружается страница.

Это много шаблонов для написания. Даже если вы решите использовать встроенную директиву v-resize, вам все равно придётся определять метод изменения размера. С объектом breakpoint вы можете полностью пропустить эту логику и вернуться к созданию своего приложения.

All breakpoint props:

Customize the breakpoints

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 Modifying Stylus variables). 2. To use the same values on the javascript side of things you must pass them during the application bootstrap like so:

Edit this page | language on Github