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(???);
  }
});

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

这是代码，我正在尝试更改 "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>

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

Answer 2

我花了很长时间才弄清楚如何将响应式排版与 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 接收主题的相关部分或主题包括排版并将其传递过来。

Answer 3

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

@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 文件中定义的。

Angular Material 中的响应式排版

Responsive Typography in Angular Material

css

sass

responsive-design

angular-material

angular