响应式排版在Angular Material中的实现

Question

尝试找出如何根据屏幕尺寸（低于400px）设置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(???);
  }
});

我也尝试使用“视图封装”方法来针对特定元素进行操作，但这只会破坏整个页面的布局，所以这可能是最后的选择。

以下是代码，我正在尝试更改“label-one”，“label-two”和“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>

- Hawke

Answer 1

我花了很长时间才弄清楚如何将响应式排版与Angular Material主题混合使用，当我试图解决这个问题时，偶然发现了这个问题。因此，我想在这里展示我是如何解决它的：

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

- seawave_23

Answer 2

just是一个媒体查询。在你的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都会影响整个应用程序。

- Eliseo

---

这对材料的排版没有帮助。您的 mat-lists 不会有更大的字体。 - Spock

Answer 3

如果还有其他人在寻找使用 Angular Material Typography 实现响应式布局的解决方案（不同屏幕尺寸使用不同字体大小），这里是我的解决方案。

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

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

基本上，诀窍在于为每个所需的媒体查询包含mat.all-component-typographies()并传入所需的字体配置（在我的情况下，这是在单独的_fonts.scss文件中定义的）。

- ibrcic