您必须根据屏幕宽度动态设置mat-grid-list的cols属性.您必须决定mat-grid-list将呈现1列版本的宽度断点.
HTML:
<mat-grid-list [cols]="breakpoint" rowHeight="2:0.5" (window:resize)="onResize($event)">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
<mat-grid-tile>5</mat-grid-tile>
<mat-grid-tile>6</mat-grid-tile>
</mat-grid-list>
TS:
ngOnInit() {
this.breakpoint = (window.innerWidth <= 400) ? 1 : 6;
}
onResize(event) {
this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6;
}
希望这有帮助！