如何使用 vuetify 使字体大小响应？

Question

在vuetify他们有排版的帮助类。

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

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

我期待：

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

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

Answer 1

更新

Vuetify 1.5 版

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

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

Vuetify 版本 2

断点对象

展示

Answer 2

我的解决方案在variables.scss文件中全局更改字体大小：

这是假设您使用的是 Vuetify 2 和 @vue/cli-service 3.11 或更高版本。

第1步：

在src/scss/创建_emptyfile.sass和_font-size-overrides.scss.

在_emptyfile.sass您可以添加此评论：

// empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795

第2步：

在_font-size-overrides.scss文件中：

/**
 * define font-sizes with css custom properties.
 * you can change the values of these properties in a media query
*/

:root {
    --headings-size-h1: 28px;
    --headings-size-h2: 22px;
    @media #{map-get($display-breakpoints, 'lg-and-up')} {
        --headings-size-h1: 32px;
        --headings-size-h2: 26px;
    }
}

第 3 步：

在variables.scss文件中（您覆盖 Vuetify 变量的位置）：

/**
 * Override Vuetify variables as you normally would
 * NOTE: remember to provide a fallback for browsers that don't support Custom Properties
 * In my case, I've used the mobile font-sizes as a fallback

*/

$headings: (
    'h1': (
        'size': var(--headings-size-h1, 28px),
    ),
    'h2': (
        'size': var(--headings-size-h2, 22px),
    )
);

第 3 步：

在vue.config.js文件中：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/scss/_emptyfile.sass"` // empty file to workaround this issue: https://github.com/vuetifyjs/vuetify/issues/7795
            },
            scss: {
                prependData: `@import "@/scss/variables.scss"; @import "@/scss/_font-size-overrides.scss";`,
            }
        }
    },
};