如何仅针对移动端调整Angular Material对话框的宽高？

一、组件CSS修改对话框样式无效的原因 #

Angular Material的对话框是直接挂载到body标签下的，不属于当前组件的DOM结构范围。而Angular默认的**视图封装（ViewEncapsulation）**会给组件样式添加唯一属性前缀，导致组件内的样式无法作用到对话框上，只有全局样式文件（比如global_styles.css）能直接覆盖默认样式。

二、移动端单独调整对话框宽高的实现方法 #

通过自定义对话框类名 + 全局媒体查询的方式，既能针对性修改移动端样式，又不影响桌面端表现：

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

在调用MatDialog.open()时，通过panelClass参数给对话框添加自定义类名，例如mobile-responsive-dialog：

// 组件内打开对话框的代码
openDialog() {
  this.dialog.open(YourDialogComponent, {
    panelClass: 'mobile-responsive-dialog',
    // 桌面端默认宽高配置
    width: '600px',
    height: '400px'
  });
}

步骤2：全局样式中添加媒体查询规则 #

在global_styles.css里，针对移动端屏幕宽度（比如≤768px）设置自定义类的宽高：

/* 桌面端保持默认配置，无需额外设置 */

/* 移动端适配规则（屏幕宽度≤768px时生效） */
@media (max-width: 768px) {
  .mobile-responsive-dialog {
    width: 90vw !important; /* 占视口宽度90% */
    height: 80vh !important; /* 占视口高度80% */
    max-width: none !important; /* 覆盖Material默认的最大宽度限制 */
  }
}

替代方案：使用::ng-deep（不推荐长期使用） #

若不想依赖全局样式，可在组件CSS中用::ng-deep穿透视图封装，但该特性已标记为弃用，未来可能移除：

::ng-deep .mat-dialog-container {
  /* 桌面端样式 */
  width: 600px;
  height: 400px;
}

@media (max-width: 768px) {
  ::ng-deep .mat-dialog-container {
    width: 90vw;
    height: 80vh;
    max-width: none;
  }
}

三、注意事项 #

• 使用!important是为了覆盖Angular Material默认样式的优先级，若自定义类的选择器优先级足够高（比如结合父级选择器），也可省略!important。
• 可根据需求调整媒体查询的断点（比如改成max-width: 576px适配小屏手机）。
• 优先选择自定义类+全局媒体查询的方案，避免污染全局样式的同时保证样式生效。

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