采用材料栅格的角7响应布局

Question

我正在设置一个web应用程序，并且我想实现具有响应性的移动版本。

我用的是角7，角度材料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>

我有一个网格列表，其中有12所学院，其中包含3个瓷砖：

A-6 (6/12)

B-3 (3/12)

C- 3 (3/12)

<- 12

AAAAAA BBB CCC

当我得到手机大小时，我想要:一个有12科尔的网格列表，其中包含3个瓷砖：

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值都是相同的，唯一的区别是列数。这使得实现响应性设计变得更简单，因为您只需要在12到6之间更改cols值。

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

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

使用CDK布局模块检测设备更改：

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)'])