通过CSS媒体查询将Angular Material Dialog适配为移动端底部弹窗

核心思路 #

给Mat-Dialog指定自定义面板类，结合CSS媒体查询覆盖Angular Material默认样式，实现大屏居中对话框、小屏底部全屏弹窗的效果。

步骤1：打开对话框时指定自定义类 #

在组件调用dialog.open时，添加panelClass配置，方便CSS精准定位：

this.dialog.open(YourTargetDialogComponent, {
  panelClass: 'responsive-dialog',
  // 无需手动设置width/height，交由CSS控制
});

步骤2：编写响应式CSS样式 #

在全局样式文件（如styles.scss）或组件样式文件中添加以下代码：

/* 桌面端默认样式：居中显示，限制最大宽度 */
.responsive-dialog {
  max-width: 600px;
  width: 90%;
  margin: 0 auto;
}

/* 移动端适配（断点可根据需求调整，这里以768px为分界） */
@media (max-width: 767.98px) {
  /* 覆盖Material内置定位样式，实现底部全屏 */
  .cdk-overlay-pane.responsive-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-items: flex-end;
    justify-content: center;
  }

  .responsive-dialog .mat-dialog-container {
    border-radius: 16px 16px 0 0; /* 顶部圆角优化视觉效果 */
    max-height: 80vh; /* 限制弹窗高度，避免内容溢出屏幕 */
    overflow-y: auto; /* 内容过长时允许纵向滚动 */
    padding: 24px; /* 可根据需求调整内边距 */
  }
}

补充说明 #

• 关于!important：由于Angular Material内置样式优先级较高，用!important可确保自定义样式生效。若不想用!important，可提升选择器优先级，比如写成body .cdk-overlay-pane.responsive-dialog。
• 断点调整：可根据产品需求修改媒体查询的max-width值，比如改成600px适配更小的平板屏幕。
• 遮罩样式：若需调整移动端背景遮罩，可在媒体查询中添加.cdk-overlay-backdrop的样式，比如调整透明度。

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