如何在小屏幕上调整Mat Dialog尺寸，实现弹窗响应式适配？

你当前的问题是仅给弹窗设置了固定比例的宽度，未对小屏场景做适配限制，可通过以下几种方式实现响应式：

方案1：直接配置宽度参数（最简实现） #

使用CSS clamp 函数或者搭配 maxWidth 参数，一步实现不同屏幕下的宽度自适应，修改.ts中弹窗配置代码即可：

openPopUp() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    // 含义：最小宽度300px，默认占屏幕宽度60%，最大宽度不超过800px
    dialogConfig.width = "clamp(300px, 60%, 800px)";
    // 额外加全局最大宽度限制，避免弹窗超出屏幕可视范围
    dialogConfig.maxWidth = "95vw";
    this.dialog.open(GetBuyDetailsComponent, dialogConfig);
}

方案2：监听断点动态调整宽度（精细控制） #

如果需要对不同尺寸设备做更定制化的宽度配置，可以使用Angular CDK自带的BreakpointObserver监听屏幕断点：

1. 首先导入依赖并注入到组件中：

// 头部导入
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

// 构造函数注入
constructor(
  private dialog: MatDialog,
  private breakpointObserver: BreakpointObserver
) {}

2. 修改弹窗打开逻辑：

openPopUp() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    // 判断是否为手机类小屏设备
    const isSmallScreen = this.breakpointObserver.isMatched(Breakpoints.Handset);
    dialogConfig.width = isSmallScreen ? "95%" : "60%";
    dialogConfig.maxWidth = "800px";
    this.dialog.open(GetBuyDetailsComponent, dialogConfig);
}

方案3：全局样式覆盖（统一适配所有弹窗） #

如果需要所有项目内的Mat Dialog默认都支持响应式，可以直接在全局样式文件styles.scss中添加规则：

// 所有弹窗通用响应式规则
.mat-dialog-container {
  width: clamp(300px, 60%, 800px) !important;
  max-width: 95vw !important;
}

// 如果仅需适配当前的购买详情弹窗，可先给弹窗加自定义类名
// dialogConfig.panelClass = 'buy-detail-dialog'
// 再单独写样式：
.buy-detail-dialog {
  width: 95% !important;
  @media (min-width: 768px) {
    width: 60% !important;
    max-width: 800px !important;
  }
}

注意：如果弹窗内部组件有固定宽度的元素，也需要同步修改为响应式尺寸，避免内容溢出导致弹窗无法正常适配。

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