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 | |||
Breakpoint object
Vuetify将可用的断点转换为应用程序内的可访问对象。这将允许您根据视野大小分配/应用特定的属性和特性。该对象可以从一下位置被访问：
该对象包含与您已经习惯使用的栅格系统相同的语义属性。让我们尝试一个真实世界的例子。您有一个v-dialog组件，您想要在移动设备上转换成一个全屏对话框。通常情况下，您需要将视野大小绑定在观察者上，和/或在页面加载时进行检查。
这是很多的样板文字。即使您选择使用内置的v-resize指令，仍然必须定义调整大小的方法。使用断点对象，您可以完全跳过这个逻辑并重新构建您的应用程序。
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: