Vuetify除了像很多UI框架提供了根据断点设置栅格大小的功能，还提供了JS代码级别的断点对象，用于动态的设置断点，和根据断点变化做操作，这一点是纯CSS框架不编写额外CSS代码很难实现的。

1 断点类型
2 断点对象
2.1 监听断点变化
2.2 breakpoint对象的属性
2.3 自定义断点
3 其他一些布局知识
3.1 v-container的grid-list-{xs through xl}属性
3.2 默认的页面组织结构
3.3 v-responsive指定长宽比 Aspect Ratio
3.4 预制模板

1 断点类型

v-flex最关键的API之一就是断点。这些断点类似于其他UI框架，占的大小也是从小覆盖到大，比如设置xs1 md2，则在xs-sm这个范围内，宽度都是1。 Vuetify中一共有5个断点，断点名称和对应关系如下：

代码	对应设备	宽度范围
xs	手机屏幕	小于600px
sm	平板设备	600px-959px
md	大型平板到笔记本电脑	960px-1263px
lg	普通桌面显示器	1264px-1903px
xl	4K和超宽显示器	大于1903px

以断点代码加上1-12的方式直接设置在v-flex元素上，使其可以根据屏幕宽度改变自身的宽度，从而达到排版的效果。

2 断点对象

有了FLEX之后，在不同的宽度之下，除了改变v-flex元素的宽度之外，很可能还需要更改FLEX容器的属性。还有可能同一个页面的不同组件，可能需要不同的断点来展示。 Vuetify提供了断点对象$vuetify.breakpoint，通过该对象，就可以方便的监听断点变化。

2.1 监听断点变化

先看来自官方文档然后修改了一下的案例，以后的代码中都假设已经导入了Vue和vuetify以及在#app元素上挂载了Vue：

<div id="app">
    <v-app>
        <v-container>
            <v-layout row wrap justify-center tag="p">
                <v-flex xs3>
                    {{imageHeight}}
                </v-flex>
            </v-layout>
        </v-container>
    </v-app>
</div>
<script>
    new Vue({
        el: '#app',
        mounted(){
            console.log(this.$vuetify.breakpoint)
            console.log(this.$vuetify.breakpoint.name)
        },
        computed:{
            imageHeight(){
                switch (this.$vuetify.breakpoint.name) {
                    case 'xs': return '220px'
                    case 'sm': return '400px'
                    case 'md': return '500px'
                    case 'lg': return '600px'
                    case 'xl': return '800px'
                }
            }
        }
    })
</script>

在程序启动的时候，会根据当前的窗口大小打印出breakpoint对象和其name属性，前者的内容一会再看，后者就是当前屏幕的代码。然后改变屏幕的宽度，会发现显示的像素大小会变动，这说明两点：

breakpoint是当前实例的响应式数据对象（否则计算属性不会自动更新）
在每次断点改变的时候，breakpoint对象会发生改变。

2.2 breakpoint对象的属性

官方文档里列出了断点对象的属性，主要是判断当前所属的屏幕宽度范围的一些布尔值：

{
  xs: boolean
  xsOnly: boolean
  sm: boolean
  smOnly: boolean
  smAndDown: boolean
  smAndUp: boolean
  md: boolean
  mdOnly: boolean
  mdAndDown: boolean
  mdAndUp: boolean
  lg: boolean
  lgOnly: boolean
  lgAndDown: boolean
  lgAndUp: boolean
  xl: boolean
  xlOnly: boolean
  name: ('xs' | 'sm' | 'md' | 'lg' | 'xl')
  width: number
  height: number
  thresholds: { xs: number, sm: number, md: number, lg: number }
  scrollbarWidth: number
}

在改变了窗口宽度之后，如果跨越了断点，则断点对象上的所有相关的布尔值都会重新计算，也可以获取名称，以及当前的宽度和高度。很多属性看名称就可以用了。有了监听断点的能力和了解了断点对象的属性，我们就可以来尝试完成这篇文章里的导航栏例子：这个导航栏有四个按钮在xs屏幕上会上下堆叠，在sm屏幕上会等分成四个导航按钮，在更大的屏幕上则集中在右侧：

<div id="app">
    <v-app>
        <v-container>
            <v-layout wrap :class="classObject">
                <v-flex xs1>
                    <div style="text-align: center;"><a href="#">Home</a></div>
                </v-flex>
                <v-flex xs1>
                    <div style="text-align: center;"><a href="#">Products</a></div>
                </v-flex>
                <v-flex xs1>
                    <div style="text-align: center;"><a href="#">Contact</a></div>
                </v-flex>
                <v-flex xs1>
                    <div style="text-align: center;"><a href="#">About</a></div>
                </v-flex>
            </v-layout>
        </v-container>
    </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<script>
    new Vue({
        el: '#app',
        computed:{
            classObject:function () {
                return {
                    "justify-end": this.$vuetify.breakpoint.lgAndUp,
                    "column": this.$vuetify.breakpoint.xsOnly,
                    "justify-space-around":this.$vuetify.breakpoint.smAndUp && this.$vuetify.breakpoint.mdAndDown
                }
            }
        }
    })
</script>

这段代码通过不同的断点，动态设置v-layout元素的样式类，xs屏幕就修改为竖直排列，sm至md屏幕为四个分散对齐，lg以上的屏幕，这四个链接会排列到屏幕右侧。

2.2 自定义断点

自定义断点需要两个步骤：

需要覆盖$grid-breakpointsCSS属性
在导入Vuetify插件的时候，明确的给breakpoint对象指定thresholds对应的属性和滚动条的大小，例如：
```
Vue.use(Vuetify, {
  breakpoint: {
    thresholds: {
      xs: 360
    },
    scrollbarWidth: 10
  }
})
```

这个暂时先了解一下即可。Vuetify提供了很多主题和CSS的变量可以覆盖，毕竟现在还没有到定制Vuetify的阶段。

3 其他布局知识

3.1 v-container的grid-list-{xs through xl}属性

这个grid-list-{xs through xl}主要是用来调整gutters，也就是栅格系统里每个格子的间距空间。例子可以看官网这个例子，用来分割瀑布流图片是不错的效果。

3.2 默认的页面组织结构

在前边分析结构的时候已经分析过了，v-app标签对于所有的应用都是必须的，要将自己的应用写在这个标签内部，因为这个标签是Vuetify很多组件和功能的挂载点。除此之外，还有一个v-content标签，用来配合v-app包裹对象，v-content标签一定要是v-app的直接子元素。官网文档推荐了默认的项目结构如下：

<v-app>
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app></v-footer>
</v-app>

3.3 v-responsive指定长宽比 Aspect Ratio

有时候对于一些block元素，想保持其一定的比例，看上去比较美观，这个时候可以使用v-responsive组件来指定具体的比例和大小。这个元素会被渲染成一个DIV元素，在里边的内容不超出的情况下，会保持指定的长宽比例。简单看一下API：

aspect-ratio，属性的值用宽/高来表示，比如aspect-ratio="16/9"就表示
height，指定高度
max-height，最大高度
min-height，最小高度
width，指定宽度
max-width，最大宽度
min-width，最小宽度

在特定范围内排版，还算比较好看，尤其是在父元素的宽度已经确定的情况下。

3.4 预制模板

官网还提供了一些预先做好的简单模板，用于快速制作页面。其中有内容居中的页面，很方便做登录等界面。 Grid栅格排版布局的内容就是这些了。Vuetify框架本身还有可以指定导入部分组件，图标和国际化的内容。导入部分组件和国际化的部分暂时不看，图标的部分到之后的使用图标组件的部分再来学习。之后需要学习基础的样式和主题。