Angular Material 中的响应式排版

Posted 2023-03-06

【中文标题】Angular Material 中的响应式排版

【英文标题】：Responsive Typography in Angular Material

【发布时间】：2020-10-03 09:41:19

【问题描述】：

试图弄清楚如何根据屏幕大小（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>

【参考方案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您在组件中写入对所有应用程序的影响。

【参考方案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 接收主题的相关部分或包括排版的主题并将其传递。