Vuetifyにはブレークポイントサービスというものがあり、ブレークポイントに応じて表示の出し分けや、プロパティの値を変更することができます。
そのサービスでよく使用したものを紹介します。
$vuetify.breakpoint.name
$vuetify.breakpointの name プロパティは、現在アクティブなブレークポイントの名前（xs、sm、md、lg、xl）を受け取ることができます。
name: string●使い方
ブレークポイントによってプロパティの値を変更
<template>
<v-card :height="height">
...
</v-card>
</template>
<script>
export default {
computed: {
height () {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return 220
case 'sm': return 400
case 'md': return 500
case 'lg': return 600
case 'xl': return 800
},
},
}
</script>$vuetify.breakpoint.ブレークポイント名（xs、sm、md、lg、xl）
ビューポートに応じて、各ブレークポイントがアクティブな状態かを判定します。
xs: boolean
sm: boolean
md: boolean
lg: boolean
xl: boolean●使い方
ブレークポイントがlgだったら要素を表示、それ以外は非表示
<h2 v-show="$vuetify.breakpoint.lg">
Title
</h2>ブレークポイントがxsだったらheightを100に、それ以外はheightを200に設定
<v-card :height="$vuetify.breakpoint.xs ? 100 : 200">
Title
</v-card>$vuetify.breakpoint.mobile
現在のビューポートがmobile-breakpointオプション（md以下）よりも大きいか小さいかに応じて、trueまたはfalseが返ります。
●使い方
モバイル時に要素を表示
<h2 v-show="$vuetify.breakpoint.mobile">
mobile
</h2>画面サイズに応じてプロパティの値を変更
<v-carousel
:hide-delimiters="$vuetify.breakpoint.mobile ? true : false"
>$vuetify.breakpoint.ブレークポイント名AndDown
現在のビューポートが指定のブレークポイント以下であればtrue それ以外はfalse が返ります。
smAndDown: boolean
mdAndDown: boolean
lgAndDown: boolean●使い方
ブレークポイントがmd以下の時に要素を表示
<h2 v-show="$vuetify.breakpoint.mdAndDown">
Title
</h2>$vuetify.breakpoint.ブレークポイント名AndUp
現在のビューポートが指定のブレークポイント以上であればtrue それ以外はfalse が返ります。
smAndUp: boolean
mdAndUp: boolean
lgAndUp: boolean●使い方
ブレークポイントがmd以上の時に要素を表示
<h2 v-show="$vuetify.breakpoint.mdAndDown">
Title
</h2>