根据视口在Vuetify中全局更改字体大小吗？

Question

这是这篇文章的副本：

Change font size in Vuetify based on viewport?

但是，我正在寻求帮助，以查看是否有办法在全局级别上执行此操作，以使所有组件都受到影响-而不是在我使用它们时必须在每个单独的组件上都这样做？

Answer 1

我想出了一个我认为很容易解决的解决方案：

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

/**
 * 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;
    }
}

/**
 * then 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),
        )
);