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?

Answer 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