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

【问题标题】：How to make font size responsive using vuetify?如何使用 vuetify 使字体大小响应？
【发布时间】：2020-06-16 22:41:23
【问题描述】：

在vuetify 中有用于排版的辅助类。

例如，.display-4 商品为 h1。 here the full list.

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

我期待：

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

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

【问题讨论】：

您认为他们为什么会积极响应？这些类没有附加一个媒体查询。如果您希望它们响应，您需要编写自己的媒体查询。

标签： vue.js vuetify.js

【解决方案1】：

更新

Vuetify 1.5 版

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

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

Vuetify 版本 2

breakpoint object

Display

【讨论】：

【解决方案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";`,
            }
        }
    },
};

【讨论】：

工作。是否有使用 Vuetify 或其他更简单的选项？

【解决方案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%;
    }
}

【讨论】：