如何自定義角材料卡用於移動

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; 
    } 
}