根据视口更改 Vuetify 中的字体大小? [英] Change font size in Vuetify based on viewport?

问题描述

我有一个标题:

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

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

I would like to set font size to 3em when the view is XS. Right now I duplicated it as follows:

<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 查询.这可能吗?

However I would like to avoid this duplication and solve the issue with CSS alone, but without having to write my own @media queries in the local .vue file. Is that possible?

或者，我可以使用预定义的类而不是直接指定字体大小甚至完全不同的元素，例如类似于

当它是 XS 而

在其他视口上.

Alternatively, I'm ok with using predefined classes instead of specifying font size directly or even different elements completely, e.g. something like <h3> when it's XS but <h2> on other viewports.

推荐答案

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

I too have been trying to solve this riddle, as it feels gross to reach into javascript to handle simple style changes for different device sizes.

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

As it turns out, generating custom css rules for different breakpoints is quite easy because Vuetify is leveraging Stylus and assigning the breakpoints to a Stylus variable. Naturally, this variable is available in your custom vue components and style files (provided you have the proper pre-processor setup to compile stylus).

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

Here are some resources that helped me understand things better:

1. 预处理器设置:

1. Pre-processor setup:

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

修改触控笔变量 - Vuetify:

Modifying Stylus Variables - Vuetify:

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

Stylus @media 查询 - http://stylus-lang.com/docs/media.html

Stylus @media queries - http://stylus-lang.com/docs/media.html

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

归根结底，这就是你在 Vue 单文件组件中得到的:

Boil it all down, and here's what you get in a Vue single file component:

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

请注意，在上面的代码中，我们通过在 Stylus 媒体查询中定位并使用 $display-breakpoints 对象来更改 <v-card-title> 组件的字体大小以确定所需的断点.

Notice in the code above, we are changing the font-size of the <v-card-title> component by targeting it in our Stylus media queries and using the $display-breakpoints object to identify the desired breakpoint.

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

I think the benefit of not having a UI framework that generates every option at every breakpoint is a much smaller file to load. It seems like Vuetify+Stylus is a lighter approach that makes writing custom @media queries the simplest and most efficient approach.

这篇关于根据视口更改 Vuetify 中的字体大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！