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

Question

在争夺战中，它们有用于排版的助手类。

例如，用于.display-4的h1商品。这里是完整的清单。

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

我本来想：

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

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

Answer 1

更新

验证版本1.5

查看display 示例，了解如何在命中断点时使用类。尽管如此，您可以在Vuetify中使用动态类绑定和断点对象。

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

2版

断点对象

显示

Answer 2

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

这是假设您使用的是Vuetify 2和@vue/ 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";`,
            }
        }
    },
};

Answer 3

variables.scss文件中的全局字体大小

html {
    font-size: 90%;
    @media only screen and (min-width: 600px) {
        font-size: 94%;
    }
    @media only screen and (min-width: 1000px) {
        font-size: 98%;
    }
    @media only screen and (min-width: 1200px) {
        font-size: 100%;
    }
}