根据视口更改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解决问题,但无需@media在本地.vue文件中编写自己的查询.那可能吗？

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

Answer 1

您可以根据视口应用类

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

Answer 2

您可以使用由Vuetify本身提供和跟踪的Breakpoint对象.引用文档:

Vuetify将可用断点转换为应用程序中的可访问对象.这将允许您根据视口大小分配/应用特定属性和属性.

在同一个docpage中提到了一种可能的(而且是直接的方式) - 使用computed属性来计算font-size:

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/zh_CN/framework/theme#setup-stylus-loader-with-webpack
   • 就我而言，通过使用Nuxt，已经为我设置了手写笔的预处理程序。但是，为了使这种方法起作用，您需要确保可以编译Stylus。

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

   • https://vuetifyjs.com/zh_CN/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手写笔对象是您的新好朋友！

彻底煮熟，这就是您在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查询成为最简单，最有效的方法。