基于视口更改 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 文件。这可能吗？

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

Answer 1

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

Vuetify converts the available breakpoints into an accessible object from within your application. This will allow you to assign/apply specific properties and attributes based upon viewport size.

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

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

... 并直接在您的模板中使用它。当然，您可以使用动态 class 名称执行相同的操作 - 例如应用于 $vuetify.breakpoint.xsOnly。

Answer 2

您可以根据视口应用class

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

Answer 3

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

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

这里有一些资源可以帮助我更好地理解事物：

Pre-processor 设置：
- https://vuetifyjs.com/en/framework/theme#setup-stylus-loader-with-webpack
- 就我而言，通过使用 Nuxt，手写笔的 pre-processor 设置已经为我设置好了。但是要使这种方法起作用，您需要确保可以编译 Stylus。
修改 Stylus 变量 - Vuetify：
- https://vuetifyjs.com/en/framework/theme#modifying-stylus-variables
- 在此页面上，您将找到 Vuetify 合并的所有手写笔变量的 link：https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl
Stylus @media 查询 - http://stylus-lang.com/docs/media.html

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

归纳起来，这是您在 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> 组件的 font-size，方法是在我们的 Stylus 媒体查询中定位它并使用 $display-breakpoints 对象来标识所需的断点。

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

Answer 4

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

$vuetify.breakpoint.width

Answer 5

除了。

您还可以添加多个类喜欢

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

基于视口更改 Vuetify 中的字体大小？

Change font size in Vuetify based on viewport?

css

viewport

vue.js

vuetify.js