Question

试图找出如何根据屏幕尺寸（低于400像素）设置mat-tab-label的字体大小。

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

我也尝试过使用BreakpointObservers进行实验，但是由于我对Sass的了解很少，所以不确定如何定位该特定属性：

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

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

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

<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。在您的 styles.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 all 您将分量影响写入所有应用程序。

Answer 2

我花了很长时间才弄清楚如何将响应式排版与 Angular Material Theming 相结合，我在试图弄清楚时偶然发现了这个问题。所以我想在这里展示我是如何解决它的：

@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 接收主题的相关部分或包括排版在内的主题并将其传递。

角材料中的响应式排版

2 个答案: