Change font size in Vuetify based on viewport?
You can use Breakpoint object, provided and tracked by Vuetify itself. Quoting the docs:
Vuetify converts the available breakpoints into an accessible object from within your application. This will allow you to assign/apply specific properties and attributes based upon viewport size.
One possible (and rather direct way) is mentioned in the same docpage - using computed property to calculate font-size:
computed: {
fontSize() {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return '3em';
default: return '5em';
}
}
}
... and use it in your template directly. Of course, you can do the same with dynamic class name instead - applied on $vuetify.breakpoint.xsOnly
, for example.
You can apply class based on viewport
:class="{'subheading': $vuetify.breakpoint.xs}"