Responsive Typography in Angular Material

Question

Trying to figure out how to set font size of mat-tab-label based on screen size (below 400px).

I tried putting custom configs in different media queries like this @include mat-tabs-typography($tabs-typography-mobile); without success.

I also tried experimenting with BreakpointObservers, but not sure how to target that specific property as I understand Sass very little:

this.observer.observe('(max-width: 400px)').subscribe(result => {
  if (result.matches) {
    document.documentElement.style.setProperty(???);
  }
});

Also tried to target specific element with "View Encapsulation" method, but that just messes up entire layout of the page, so its probably last resort.

Here is the code, I'm trying to change the font size of "label-one", "label-two" and "label-three":

<mat-tab-group mat-stretch-tabs dynamicHeight>

    <mat-tab label="label-one">
        <div class="tab"></div>
    </mat-tab>

    <mat-tab label="label-two">
        <div class="tab"></div>
    </mat-tab>

    <mat-tab label="label-three">
        <div class="tab"></div>
    </mat-tab>

</mat-tab-group>

Answer 1

It took me quite a while to figure out how to mix responsive typography with Angular Material Theming, and I stumbled upon this question while trying to figure it out. So I'd like to show here how I solved it:

@include mat-core();

$typography: null;
@media all and (max-width: $medium-screen-breakpoint - 1) {
  $typography: $type-scale-s;
  @include angular-material-typography($type-scale-s);
}

@media all and (min-width: $medium-screen-breakpoint) and (max-width: $xx-large-screen-breakpoint - 1) {
  $typography: $type-scale-m-xl;
  @include angular-material-typography($type-scale-m-xl);
}

@media all and (min-width: $xx-large-screen-breakpoint) {
  $typography: $type-scale-max;
  @include angular-material-typography($type-scale-max);
}

$theme: map_merge($custom-light-theme, (typography: $typography));
@include angular-material-theme($theme-or-color-config: $theme);
@include apply-custom-theming($theme: $theme);

.dark-theme {
  $theme: map_merge($custom-dark-theme, (typography: $typography));
  @include angular-material-color($config-or-theme: $theme);
  @include apply-custom-theming($theme: $theme);
}

Then, in your apply-custom-theming mixin, you can do the following and will always have the correct and corresponding font-size which is currently applied:

$typography-config: mat-get-typography-config($theme) or $type-scale-m-xl;
$subheading-1-font-size: mat-font-size($typography-config, subheading-1);
custom-component .element {
    font-size: $subheading-1-font-size;
}

So, the trick is to put the typography into the theming, otherwise you can never retrieve it back from there and it will always be null, but also provide a default because for initialization the screen width might not be there. Then, for applying one level of the theming to a part of the application, use a mixin receiving the relevant part of the theme or the theme including typography and pass it over.

Answer 2

just is a media query. In your styles.css, e.g.

html{
  font-size:12px
}
@media(min-width: 400px) //if more than 400 px
{
  html{
    font-size:14px
  }
}

You can use in only a determinates elements, you can enclse all under <div class="special"> and use, e.g.

   .special .mat-tab-label{
      font-size:12px
    }
    @media(min-width: 400px) //if more than 400 px
    {
      .special .mat-tab-label{
        font-size:14px
      }
    }

You can use in your styles.css (the styles that change all the application) or using ViewEncapsulation.None and use in component, but if you use this last option remember that all the .css you write in component affect to all the aplication.