根据视口更改Vuetify中的字体大小？

Question

我有一个标题：

 <v-card-text style="font-size:5em">
    Some Heading Here
</v-card-text>

当视图为 XS 时，我想将字体大小设置为 3em。现在我复制它如下：

 <v-card-text hidden-xs-only style="font-size:5em">
    Some Heading Here
</v-card-text>
<v-card-text visible-xs-only style="font-size:3em">
    Some Heading Here
</v-card-text>

但是我想避免这种重复并 单独使用 CSS 解决问题，但不必在本地 .vue 文件中编写我自己的 @media 查询。那可能吗？

或者，我可以使用预定义的类而不是直接指定字体大小甚至完全指定不同的元素，例如当它是 XS 时是 <h3> <h2> 而在其他视口上是 --- 。

原文由 ierdna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我也一直在尝试解决这个谜题，因为使用 javascript 来处理不同设备尺寸的简单样式更改感觉很糟糕。

事实证明，为不同的断点生成自定义 css 规则非常容易，因为 Vuetify 正在利用 Stylus 并将断点分配给 Stylus 变量。当然，这个变量在你的自定义 vue 组件和样式文件中是可用的（前提是你有正确的预处理器设置来编译手写笔）。

以下是一些帮助我更好地理解事物的资源：

1. 预处理器设置：

   • https://vuetifyjs.com/en/framework/theme#setup-stylus-loader-with-webpack
   • 就我而言，通过使用 Nuxt，手写笔的预处理器设置已经为我设置好了。但是要使这种方法起作用，您需要确保可以编译 Stylus。

2. 修改手写笔变量 - Vuetify：

   • https://vuetifyjs.com/en/framework/theme#modifying-stylus-variables
   • 在此页面上，您将找到指向 Vuetify 合并的所有手写笔变量的链接： https ://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl

3. 手写笔@media 查询 - http://stylus-lang.com/docs/media.html

如您所见，$display-breakpoints Stylus Object 是您最好的新朋友！

把它全部归结起来，这就是你在 Vue 单文件组件中得到的东西：

 <template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <v-card>
        <v-card-title class="custom-selector headline">
          Welcome to the Vuetify + Nuxt.js template
        </v-card-title>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  // ...
}
</script>

<style lang="styl">
.custom-selector
  font-size 3em
  @media $display-breakpoints.xs-only
    font-size 2em
  @media $display-breakpoints.lg-and-up
    font-size 5em
</style>

请注意，在上面的代码中，我们正在更改 <v-card-title> 组件的字体大小，方法是在我们的 Stylus 媒体查询中定位它并使用 $display-breakpoints 对象来识别所需的断点。

我认为没有在每个断点处生成每个选项的 UI 框架的好处是要加载的文件要小得多。看起来 Vuetify+Stylus 是一种更轻松的方法，它使编写自定义 @media 查询成为最简单和最有效的方法。

原文由 CICSolutions 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

除了 伊戈尔的回答。

您还可以添加多个类，例如

:class="{'subheading font-weight-black pt-2': $vuetify.breakpoint.xs}"

原文由 Debu Shinobi 发布，翻译遵循 CC BY-SA 4.0 许可协议