css - Angular Material 中的响应式排版

Question

试图弄清楚如何设置 mat-tab-label 的字体大小基于屏幕尺寸(低于 400 像素)。

我尝试将自定义配置放在这样的不同媒体查询中 @include mat-tabs-typography($tabs-typography-mobile);没有成功。

我也尝试使用 BreakpointObservers 进行试验，但不确定如何定位该特定属性，因为我对 Sass 了解很少:

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

还尝试使用“ View 封装”方法定位特定元素，但这只会弄乱页面的整个布局，因此它可能是最后的手段。

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

<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

只是一个media query .在您的 样式.css ，例如

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

您只能在确定元素中使用，您可以在 <div class="special"> 下包含所有元素。并使用，例如

   .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 并在组件中使用，但如果您使用最后一个选项，请记住 全部 您在组件中编写的 .css 会影响所有应用程序。