How to do responsive typography

[Ewa]

Hi

I need that my header text should be h4 on desktop screen, but h5 on tablets and mobiles. But something like:

<div class="text-h4-sm text-h5 q-my-lg text-center">{{ title }}</div>

won’t work and I can’t found how to do it in documentation.

[metalsadman]

@Ewa use computed class (you will find it in Vue docs) and quasar platform plugin .ie

<.. :class="computedClass + ' q-my-lg text-center'" .. >...
...
computed: {
  computedClass () {
   return this.$q.platform.is.desktop ? 'text-h4-sm' : 'text-h5'
...

see https://quasar.dev/options/platform-detection#Introduction, there’s no detection for tablet (see properties), you can also use screen plugin https://quasar.dev/options/screen-plugin#Introduction, to check for screen sizes instead.

[Ewa]

@metalsadman thank you

[qyloxe]

@Ewa there is this old thread here:
https://forum.quasar-framework.org/topic/3483/fluid-typography-solved?_=1588065751435

In it you will find a simple solution for css typography, more thorough discussion and link to rfs library.