更改视口中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上的<h3>，但在其他视口上是<h2>.

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

修改手写笔变量-Vuetify:

Modifying Stylus Variables - Vuetify:

• https://vuetifyjs.com/zh-CN/framework/theme#modifying-触笔变量
• 在此页面上，您会找到Vuetify合并的所有手写笔变量的链接:

• https://vuetifyjs.com/en/framework/theme#modifying-stylus-variables
• On this page, you'll find a link to all the stylus variables that Vuetify is incorporating: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl

手写笔@media查询- http://stylus-lang.com/docs/media.html

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

您将看到，$ display-breakpoints手写笔对象是您的新好朋友！

将其全部煮熟，这就是您在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>

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

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