Angular 7 响应式布局使用 Material 网格

Question

我正在设置一个网络应用程序，我想实现具有响应能力的移动版本。

我正在使用 Angular 7 和 angular material 7.2。

<mat-grid-list cols="12">
  <mat-grid-tile  [colspan]="6">

    <h1 class="title">Title</h1>

  </mat-grid-tile>
  <mat-grid-tile [colspan]="3">

    <h2 class="date">Date</h2>

  </mat-grid-tile>
  <mat-grid-tile [colspan]="3">

    <h1 class="price">price€</h1>

  </mat-grid-tile>
</mat-grid-list>

我有一个包含 3 个图块的 12 列的网格列表：

A- 6 (6/12)

B- 3 (3/12)

C- 3 (3/12)

网页

<-------- 12 -------->

AAAAAA BBB CCC

当我得到我想要的 phone 尺码时：一个包含 3 个图块的 12 列的网格列表：

A- 12 (12/12)

B- 6 (6/12)

C- 6 (6/12)

手机

<-------- 12 -------->

AAAAAAAAAAAA

BBBBBB-CCCCCC

对不起我的英语 ;) 谢谢

Answer 1

在网格布局中，只有比率才是真正重要的（而不是实际的列数）。在您的情况下，图块大小之间的比率不会改变 - 第一个图块的宽度始终是第二个和第三个图块的两倍。因此，您可以在数学上将您的移动布局减少到：

A- 6 (6/6)
B- 3 (3/6)
C- 3 (3/6)

现在，两种布局的图块 colspan 值相同，唯一的区别是列数。这使得实现响应式设计变得更简单，因为您只需要将 cols 值更改为 12 和 6 之间。

将 cols 值输入绑定到表达式：

<mat-grid-list [cols]="isMobile ? 6 : 12">...

使用CDK's Layout module检测设备变化：

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
...
class MyComponent {

  public isMobile: boolean = false;

  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.Handset
    ]).subscribe(result => {
      this.isMobile = result.matches;
    });
  }

  ...
}

您还可以根据屏幕大小自定义断点：

breakpointObserver.observe([
  '(max-width: 599px)'
]).subscribe(result => {
  this.isMobile = result.matches;
});

Answer 2

自定义断点:

breakpointObserver.observe(['(min-width: 500px)'])

Angular 7 响应式布局使用 Material 网格

Angular 7 responsive layout using Material Grid

grid

material-design

angular-material

responsive

angular