根据视口更改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>。

Answer 1

您可以根据视口应用类

:class="{'subheading': $vuetify.breakpoint.xs}"

Answer 2

您可以使用由 Vuetify 自己提供和跟踪的 Breakpoint 对象。引用the docs:

Vuetify 将可用断点转换为可访问对象 从您的应用程序中。这将允许您分配/申请 基于视口大小的特定属性和属性。

在同一个文档页面中提到了一种可能（而且相当直接的方式） - 使用计算属性来计算字体大小：

computed: {
  fontSize() {
    switch (this.$vuetify.breakpoint.name) {
      case 'xs': return '3em';
      default: return '5em';
    }
  }
}

... 并直接在您的模板中使用它。当然，您也可以使用动态类名来代替 - 例如应用于 $vuetify.breakpoint.xsOnly。

Answer 3

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

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

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

1. 预处理器设置：

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

2. 修改 Stylus 变量 - 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. Stylus @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 查询成为最简单和最有效的方法。

Answer 4

使用断点宽度值检查视口宽度并决定。

$vuetify.breakpoint.width