Question

在vuetify中，他们有印刷术的助手类。

例如，.display-4的{{1}}货物。 here the full list。

当我为某些元素选择display-1时，在所有分辨率下，类均具有相同的字体大小（34px）。

我期望：

h1的字体大小为34px，屏幕宽度为1024px。
.display-4在300像素的屏幕宽度中将具有18像素的字体大小。

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

Answer 1

我的解决方案全局更改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";`,
            }
        }
    },
};

Answer 2

看看显示助手example，看看在遇到断点时如何使用一个类。话虽如此，您可以在Vuetify中使用动态类绑定和breakpoint object。

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

希望它会有所帮助：）

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

2 个答案: