Angular Material多mat-card响应式布局适配问题

问题根源 #

• 始终单列：mat-card作为块级元素默认独占一行，仅设置width:20%没有改变默认文档流排列规则，剩余宽度会被默认外边距填充，无法实现多列并排
• 内容不缩放：卡片内标题、文本、图标都使用固定字号，没有设置相对尺寸规则，自然不会随容器宽度变化同步缩放

修复代码 #

1. 模板文件（component.html） #

原有模板结构无需调整，保持如下即可：

<div class="container">
  <mat-card *ngFor="let properties of menuComponent.fillerNav" class="mat-elevation-z4">
    <mat-card-header>
      <mat-card-title>
        {{properties.name}}
        <mat-icon class="iconMenu">{{properties.icon}}</mat-icon>
      </mat-card-title>
    </mat-card-header>
    <mat-divider></mat-divider>
    <mat-card-content>
      <p>
        total
      </p>
    </mat-card-content>
  </mat-card>
</div>

2. 样式文件（component.scss） #

推荐使用CSS Grid实现自适应多列，无需额外写媒体查询即可自动适配不同屏幕宽度：

// 外层容器布局
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  // 网格布局实现自动列排布
  display: grid;
  // 规则：自动填充列，单卡片最小宽度240px，剩余空间平均分配给现有列
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; // 卡片间距对齐Material Design规范
}

mat-card {
  width: 100%; // 占满网格分配的单元格宽度，移除原固定20%宽度设置
  box-sizing: border-box;
  min-height: 180px; // 可选：统一卡片最小高度，避免高低差

  // 标题响应式规则
  mat-card-title {
    font-size: clamp(16px, 2vw, 20px); // 字号范围16-20px，随视口宽度动态计算
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  // 图标跟随标题大小缩放
  .iconMenu {
    font-size: inherit;
    width: auto;
    height: auto;
  }

  // 正文响应式规则
  mat-card-content p {
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.5;
    margin: 8px 0 0;
  }
}

可选Flex布局方案 #

如果习惯用弹性盒布局，可将容器和卡片样式替换为如下版本：

.container {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  flex-wrap: wrap; // 宽度不足时自动换行
  gap: 16px;
}

mat-card {
  // 基础宽度按5列（20%）计算，减去间距偏移，最小宽度200px时自动换行
  flex: 1 1 calc(20% - 16px);
  min-width: 200px;
  box-sizing: border-box;
  // 内容响应式样式和上述Grid版本完全一致
}

适配调整说明 #

• 可通过修改minmax(240px, 1fr)里的240px值调整单卡片最小宽度，数值越小同屏可显示的卡片列数越多
• clamp()函数的三个参数可根据设计需求调整，分别对应最小字号、动态计算规则、最大字号，避免字号过大或过小
• 如果需要固定断点的列数规则，可补充媒体查询覆盖grid-template-columns属性即可

内容的提问来源于stack exchange，提问作者segmet