Change font size in Vuetify based on viewport?
I too have been trying to solve this riddle, as it feels gross to reach into javascript to handle simple style changes for different device sizes.
As it turns out, generating custom css rules for different breakpoints is quite easy because Vuetify is leveraging Stylus and assigning the breakpoints to a Stylus variable. Naturally, this variable is available in your custom vue components and style files (provided you have the proper pre-processor setup to compile stylus).
Here are some resources that helped me understand things better:
Pre-processor setup:
- https://vuetifyjs.com/en/framework/theme#setup-stylus-loader-with-webpack
- In my case, by using Nuxt, the pre-processor setup for stylus was already set up for me. But for this approach to work, you'll need to be sure you can compile Stylus.
Modifying Stylus Variables - Vuetify:
- https://vuetifyjs.com/en/framework/theme#modifying-stylus-variables
- On this page, you'll find a link to all the stylus variables that Vuetify is incorporating: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_variables.styl
Stylus @media queries - http://stylus-lang.com/docs/media.html
As you'll see, the $display-breakpoints Stylus Object is your new best friend!
Boil it all down, and here's what you get in a Vue single file component:
<template>
<v-layout column justify-center align-center>
<v-flex xs12 sm8 md6>
<v-card>
<v-card-title class="custom-selector headline">
Welcome to the Vuetify + Nuxt.js template
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
// ...
}
</script>
<style lang="styl">
.custom-selector
font-size 3em
@media $display-breakpoints.xs-only
font-size 2em
@media $display-breakpoints.lg-and-up
font-size 5em
</style>
Notice in the code above, we are changing the font-size of the <v-card-title>
component by targeting it in our Stylus media queries and using the $display-breakpoints object to identify the desired breakpoint.
I think the benefit of not having a UI framework that generates every option at every breakpoint is a much smaller file to load. It seems like Vuetify+Stylus is a lighter approach that makes writing custom @media queries the simplest and most efficient approach.
Change font-size of v-radio vuetify
Got the answer. In my css file all i have to do is
.customClass >>> label
adding those >>> icon solved the problem.
Use computed property to bind a style based on Vuetify's Viewport breakpoints
Looks like the computed property isn't returning a full style specification. So you could either change the computed function
case "xs":
return {"font-size": "1.5rem !important"};
default:
return {"font-size": "3rem !important"};
or change how it's being used
:style="{'font-size': fontSize}"
change the type of font for the logo
According to the component api there's no prop to customize the style, but you could wrap your title with a div and give it the style that you want :
<v-toolbar-title>
<div style="font-size:24pt">
Bakerita
</div>
</v-toolbar-title>
Vuetify icon size
Unfortunately in the current version (0.17.6) you will need css to create a custom icon size.
If you wanted to set a custom default size of your icons across your app you will need to target it will css.
To target icons size you can use the following:
.icon {
font-size: 20px;
}
If you are using Vuetify v1.0.0-alpha.1 or later,
<v-icon>
component has asize
attribute which you can use to set an exact
size.
Related Topics
How to Create a CSS3 Gradient in Opera
How to Get Cross Browser Compatibility in Print on Page from All Browsers
Customize a Select with Font-Awesome
How to Make a Fluid Sticky Footer
Why Do /**/ Comments Work in Stylesheets But // Comments Don'T
Rotating a Background Image with CSS3
Ie Background Size Not Working
Elastic Easing in CSS3, Best Approach
Stretch a Background Image in IE8
CSS - Circle Border with Various Colors
Why Are Inline-Block Elements Not Displayed Correctly in Internet Explorer 8
Gradient Effect for Triangle Shape Borders
Responsive Bootstrap Designing in Cakephp 3X
How to Make IE8 Honour Opacity on an ':Before' Pseudo Element