'Responsive Typography in Angular Material

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>
cssangularsassresponsive-designangular-material


Solution 1:[1]

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.

Solution 2:[2]

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.

Solution 3:[3]

If anyone else is looking for a solution for using Angular Material Typography implementation responsively (different font sizes for different screen sizes), here is my solution.

@include mat.core(fonts.$mobile-typography);

@media screen and (min-width: media.$tablet-min-width) {
  @include mat.all-component-typographies(fonts.$tablet-desktop-typography);
}

Basically, the trick is in including mat.all-component-typographies() for every media query needed and passing in a desired typography config (in my case, that is defined in separate _fonts.scss file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 seawave_23
Solution 3 ibrcic

Related Questions