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

Posted 2023-02-22

【中文标题】根据视口更改Vuetify中的字体大小？

【英文标题】：Change font size in Vuetify based on viewport?

【发布时间】：2019-02-04 19:06:40

【问题描述】：

我有一个标题：

<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>。

【参考方案1】：

您可以根据视口应用类

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

【参考方案2】：

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

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

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

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

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

【讨论】：

赞成。这是一个很好的解决方案，但 JS 总是会导致滞后，尤其是 w.r.t.视觉上的变化，这就是为什么我更喜欢尽可能多地使用 CSS。

我同意，我觉得奇怪的是类型类还没有内置媒体查询。

【参考方案3】：

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

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

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

预处理器设置：

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

修改 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

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 查询成为最简单和最有效的方法。

【讨论】：

我不知道为什么我以前没有想到这个！

@CICSolutions，我也在使用 nuxt，但是当我尝试这个时，我得到“$display-breakpoints has no property .xs-only”。我在 nuxt.config.js 的 css 配置部分中包含了 styuls 文件。想法？

@VictorP - 我可能需要查看一些代码来帮助您。 Stylus 变量使用 kebab-case 属性，而 JS 变量将是 camelCase（即 $vuetify.breakpoint.xsOnly）。除此之外，您的 Vuetify 或 Stylus 设置可能存在问题。不看你的用法很难说。

@CICSolutions 我需要将变量导入组件。出于某种原因，我认为 nuxt 已经包含了这些，因为资产/样式中有预先生成的文件，其中一个包含变量导入。

对于 Nuxt.js v2.8.1，变量没有加载到组件中，需要手动导入：@require '~vuetify/src/stylus/settings/_variables.styl'

【参考方案4】：

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

$vuetify.breakpoint.width