css - Change font size in Vuetify based on viewport?

Question

I have a title:

<v-card-text style="font-size:5em">
    Some Heading Here
</v-card-text>

I would like to set font size to 3em when the view is XS. Right now I duplicated it as follows:

<v-card-text hidden-xs-only style="font-size:5em">
    Some Heading Here
</v-card-text>
<v-card-text visible-xs-only style="font-size:3em">
    Some Heading Here
</v-card-text>

However I would like to avoid this duplication and solve the issue with CSS alone, but without having to write my own @media queries in the local .vue file. Is that possible?

Alternatively, I'm ok with using predefined classes instead of specifying font size directly or even different elements completely, e.g. something like <h3> when it's XS but <h2> on other viewports.

Answer 1

You can apply class based on viewport

:class="{'subheading': $vuetify.breakpoint.xs}"