Question

我正在设置一个Web应用程序，我想以负责任的态度来实现移动版本。

我正在使用Angular 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）

WEB

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

使用Material Grid的Angular 7响应式布局

2 个答案: