How to make font size responsive using vuetify?

Question

In vuetify they have helper classes for typography.

for example, .display-4 goods for h1. here the full list.

When I choose display-1 for some element, In all resolutions the class gets the same font size (34px).

I was expecting to:

• .display-4 will have font size of 34px in screen wide of 1024px.
• .display-4 will have font size of 18px in screen wide of 300px.

According to this I have two questions, why is that? and how to make my font size elements be responsive using vuetify?

Solution 1

Update

Vuetify version 1.5

Take a look at display helpers example to see how to use a class when hitting a breakpoint. That being said, you can use dynamic class binding and breakpoint object in Vuetify.

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

Vuetify version 2

breakpoint object

Display

Solution 2

My solution changes font-sizes globally in the variables.scss file:

This is assuming you're using Vuetify 2 and @vue/cli-service 3.11 or later.

Step 1:

In src/scss/ create _emptyfile.sass and _font-size-overrides.scss.

In the _emptyfile.sass you can add this comment:

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

Step 2:

In the _font-size-overrides.scss file:

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

Step 3:

In the variables.scss file (where you override the Vuetify variables):

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

Step 3:

In the vue.config.js file:

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";`,
            }
        }
    },
};

Comments

[zero298]

Why do you think they would be responsive? There is not a single media query attached to those classes. If you want them to be responsive, you need to write your own media queries.

[Sarma]

Worked. is there a simpler option using Vuetify or other?