如何为移动设备定制Angular Material Card

Question

所以我有以下桌面布局（我完全满意）：

这是我试图让它移动：

我喜欢这里的水平卷轴，但我觉得卡片太薄了;我想拉伸我的卡片更像盒子（正方形）。理想情况下，卡足够大，可以填充页眉和页脚之间的空隙而不会导致

HTML：

<div class="page-content">
      <div class="card-deck" fxLayout.xs="row" style="overflow: scroll; height:100%">

        <md-card style="width:10rem;" *ngFor="let make of filteredMakes" (click)="goToModels(make.niceName)"
                 class="page-card mat-card">
          <img md-card-image=""  src="assets/img/gallery/brands/256/{{make.name}}.png" class="mat-card-image" />
          <md-card-subtitle  class="mat-card-title text-center">{{ make.name }}</md-card-subtitle>
        </md-card>
    </div>

</div>

我尝试了很多css技巧并尝试使用flexbox，但必须有一些我不想要的东西（可能是媒体查询，以及如何覆盖它们）。

如何才能将以下样式仅应用于移动设备？

min-height: 375px;min-width: 278px;

如果有人对如何完成此设计有任何指示，我们将不胜感激。

Answer 1

为了获得不同的移动风格，我们这样做：

@media (max-width: 600px) {
  md-card {
    min-width:17rem;
  }
}