我有一个标题:

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

当 View 为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>,其他 viewport 上则类似<h2>

最佳答案

我也一直在尝试解决这个难题,因为接触javascript处理不同设备尺寸的简单样式更改感觉很困难。

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

以下是一些资源,可以帮助我更好地理解事情:

  • 预处理程序设置:
  • https://vuetifyjs.com/en/framework/theme#setup-stylus-loader-with-webpack
  • 在我的情况下,通过使用Nuxt,已经为我设置了手写笔的预处理程序。但是,为了使这种方法起作用,您需要确保可以编译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
  • 手写笔@media查询-http://stylus-lang.com/docs/media.html

  • 如您所见,$ display-breakpoints手写笔对象是您的新好 friend !

    彻底煮熟,这就是您在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>
    

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

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

    关于css - 更改视口(viewport)中Vuetify中的字体大小?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52086822/

    10-11 06:54
    查看更多