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.
| Device | Code | Types | Range |
|---|---|---|---|
| phone_iphoneExtra small | xs | small to large handset | < 600px |
| tabletSmall | sm | small to medium tablet | 600px > < 960px |
| laptopMedium | md | large tablet to laptop | 960px > < 1264* |
| desktop_windowsLarge | lg | desktop | 1264 > < 1904px* |
| tvExtra large | xl | 4k 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: