如何在Vuetify中通过断点为不同屏幕尺寸设置不同外边距

我明白你现在的困扰：循环渲染卡片时，<v-flex>上的ma-5在小屏幕（xs）上间距过大，想要给不同尺寸的屏幕设置对应的外边距。先看你的原始代码：

<v-container>
  <v-layout row wrap>
    <v-flex xs12 sm6 md4 ma-5 v-for="card in filteredCards" :key="card.id">
      <v-card flat class="elevation-20 test">
        <v-card-media :src="card.image" height="200px">
        </v-card-media>
        <v-card-title primary-title class="pa-4">
          <div>
            <h3 class="headline mb-0">{{card.title}}</h3>
            <div style="min-height:50px;">{{card.description}}</div>
          </div>
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>

你尝试用动态类绑定来区分断点，但遇到了$breakpoint is not defined的错误——这是因为你找错了Vuetify断点对象的位置！Vuetify的断点属性是挂载在$vuetify下面的，不是直接的全局$breakpoint。

下面给你两种可行的解决方案：

方案一：用Vuetify内置响应式间距类（最省心） #

Vuetify本身就支持响应式的间距类，完全不用写动态逻辑，直接在class里指定不同断点的间距即可。格式是{断点前缀}-{间距类}，比如：

• xs-ma-0：xs屏幕下所有方向margin为0
• sm-ma-0：sm屏幕下所有方向margin为0
• md-ma-5：md及以上屏幕下所有方向margin为5

修改后的代码如下：

<v-container>
  <v-layout row wrap>
    <v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id" class="xs-ma-0 sm-ma-0 md-ma-5">
      <v-card flat class="elevation-20 test">
        <v-card-media :src="card.image" height="200px">
        </v-card-media>
        <v-card-title primary-title class="pa-4">
          <div>
            <h3 class="headline mb-0">{{card.title}}</h3>
            <div style="min-height:50px;">{{card.description}}</div>
          </div>
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>

这种方式最简洁，完全利用框架自带的能力，不需要额外维护逻辑。

方案二：修复动态类的断点引用（适合复杂场景） #

如果你的场景需要更灵活的动态样式判断，只需要把$breakpoint改成$vuetify.breakpoint就行，这才是Vuetify官方提供的全局断点对象：

<v-container>
  <v-layout row wrap>
    <v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id" 
            :class="{'ma-0': $vuetify.breakpoint.smAndDown, 'ma-5': $vuetify.breakpoint.mdAndUp}">
      <v-card flat class="elevation-20 test">
        <v-card-media :src="card.image" height="200px">
        </v-card-media>
        <v-card-title primary-title class="pa-4">
          <div>
            <h3 class="headline mb-0">{{card.title}}</h3>
            <div style="min-height:50px;">{{card.description}}</div>
          </div>
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</v-container>

这样就能正确识别断点了，$vuetify.breakpoint还包含xsOnly、mdOnly等更多细分的断点判断属性，适合复杂的样式逻辑。

内容的提问来源于stack exchange，提问作者Un1