如何使用 vuetify 在 scss 文件中做断点? [英] How to do breakpoints in scss file with vuetify?

问题描述

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

How to use media query breakpoints in my vuetify application but in scss file?

例如引导程序使我能够在 scss 文件中执行此操作:

For example bootstrap enable me to do that in scss file:

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

vuetify 中的等价物是什么?我在 vuetify 网站上找不到任何 文档

what is the equivalent in vuetify? I can't find any documention in vuetify website

推荐答案

你可以在 scss 中做到:

You can do it in scss:

@import '~vuetify/src/styles/settings/_variables';

@media #{map-get($display-breakpoints, 'sm-and-down')} {
    .custom-class {
        display: block;
    }
}

...你是对的，关于 vuetify 中断点的文档很少

... and you're right there is very little docs regarding breakpoints within vuetify

这篇关于如何使用 vuetify 在 scss 文件中做断点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！