Css 角材料中的响应式排版

正在尝试了解如何根据屏幕大小（低于400px）设置

mat选项卡标签的字体大小

我试着在不同的媒体查询中添加自定义配置，如下面的
@include mat tabs typography（$tabs typography mobile）没有成功

我还尝试了使用断点观察者，但不确定如何针对特定属性，因为我对Sass了解甚少：

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

还尝试使用“视图封装”方法针对特定元素，但这只会弄乱页面的整个布局，所以这可能是最后的选择

这是代码，我正在尝试更改“标签一”、“标签二”和“标签三”的字体大小：


只是一个例子。在您的style.css中，例如

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

您只能在确定的元素中使用，您可以在
下全部使用，例如

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

您可以在styles.css（更改所有应用程序的样式）中使用，也可以在组件中使用ViewEncapsulation.None和use，但是如果您使用最后一个选项，请记住，您在组件中编写的.css对所有应用程序都有影响。
我花了很长时间才弄明白如何将响应性排版与角度材料主题化相结合，我在试图弄明白时偶然发现了这个问题。所以我想在这里展示我是如何解决这个问题的：

@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);
}

然后，在apply custom theming mixin中，您可以执行以下操作，并且始终具有当前应用的正确和相应的字体大小：

$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;
}

因此，诀窍是将排版放入主题中，否则您永远无法从那里检索它，它将始终为空，但也提供默认值，因为对于初始化，屏幕宽度可能不在那里。
然后，为了对应用程序的某个部分应用一个级别的主题，使用mixin接收主题的相关部分或主题（包括排版）并传递它

$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;
}