如何使用 vuetify 使字体大小响应? [英] How to make font size responsive using vuetify?

问题描述

在 vuetify 中，他们有用于排版的辅助类.

In vuetify they have helper classes for typography.

例如，.display-4 商品为 h1.这里是完整列表.

当我为某些元素选择 display-1 时，在所有分辨率下，该类的字体大小相同(34 像素).

When I choose display-1 for some element, In all resolutions the class gets the same font size (34px).

我期待:

• .display-4 在屏幕宽度为 1024 像素时的字体大小为 34 像素.
• .display-4 的字体大小为 18px，屏幕宽度为 300px.

• .display-4 will have font size of 34px in screen wide of 1024px.
• .display-4 will have font size of 18px in screen wide of 300px.

据此我有两个问题，这是为什么?以及如何使用 vuetify 使我的字体大小元素具有响应性?

According to this I have two questions, why is that? and how to make my font size elements be responsive using vuetify?

推荐答案

更新

Vuetify 1.5 版

查看显示助手 example 以了解如何使用遇到断点时的类.话虽如此，您可以使用动态类绑定和Vuetify 中的断点对象.

Take a look at display helpers example to see how to use a class when hitting a breakpoint. That being said, you can use dynamic class binding and breakpoint object in Vuetify.

示例::class="{'subheading': $vuetify.breakpoint.smAndDown, 'display-2': $vuetify.breakpoint.mdAndUp}"

Vuetify 版本 2

断点对象

显示

这篇关于如何使用 vuetify 使字体大小响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！