Question

如何在vuetify应用程序中但在scss文件中使用媒体查询断点？

例如bootstrap使我能够在scss文件中执行该操作：

@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

vuetify中的等效项是什么？我找不到任何documention in vuetify website

Answer 1

您可以在scss中完成该操作：

 $address = Address::findorFail($addressesId);
    if( $request->has('default_address')) {
      if($request->default_address == 'on'){
         $address->default_address = 1;
         $address->save();
       }
    }

}

...而且您说得对，关于vuetify中的断点的文档很少

Answer 2

我通过附加一个与断点相对应的类名来实现这一点，该类名在$vuetify.breakpoint对象中可用。这不是一个完美的解决方案，但是我只需要在我的应用程序中执行一次即可。希望对您有帮助！

示例：

<item :class="($vuetify.breakpoint.smAndDown) ? 'sm' : ''"></item>
...
<style scoped lang="scss">
#item{
    right: 130px;
    &.sm{
        right: 35px;
    }
}
</style>

如何使用vuetify在scss文件中创建断点？

2 个答案: