如何在响应式分栏页面中为不同分辨率的Material 2 Bottom Sheet指定宽度？

要在不同分辨率下为Material 2 Bottom Sheet指定宽度，结合你页面已有的响应式断点（xs/sm/md/lg），这里有两种实用方案供你选择：

方案一：通过BreakpointObserver动态配置（推荐，和你的flex布局逻辑对齐） #

这个方法会利用Angular CDK的BreakpointObserver实时检测当前屏幕断点，动态给Bottom Sheet设置对应宽度，完美匹配你页面左右栏的flex比例逻辑：

步骤1：导入必要依赖 #

在组件文件顶部导入所需模块：

import { MatBottomSheet, MatBottomSheetConfig } from '@angular/material/bottom-sheet';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

步骤2：注入BreakpointObserver #

在组件构造函数中注入BreakpointObserver：

constructor(
  private bottomSheet: MatBottomSheet,
  private breakpointObserver: BreakpointObserver
) {}

步骤3：编写响应式宽度匹配方法 #

根据你页面的flex断点规则，定义对应的宽度值（这里用百分比和你的布局对齐，也可以换成固定像素值）：

private getBottomSheetWidth(): string {
  if (this.breakpointObserver.isMatched(Breakpoints.XSmall)) {
    // xs断点下页面是纵向布局，Bottom Sheet可以占满宽度
    return '100%';
  } else if (this.breakpointObserver.isMatched(Breakpoints.Small)) {
    // sm断点对应右栏的55%比例
    return '55%';
  } else if (this.breakpointObserver.isMatched(Breakpoints.Medium)) {
    // md断点对应65%比例
    return '65%';
  } else if (this.breakpointObserver.isMatched(Breakpoints.Large)) {
    // lg及以上断点对应70%比例
    return '70%';
  }
  // 默认 fallback 宽度
  return '70%';
}

步骤4：修改openBottomSheet方法 #

在打开Bottom Sheet时，将动态获取的宽度传入配置项：

openBottomSheet() {
  this.closeBottomSheet();
  const config: MatBottomSheetConfig = {
    width: this.getBottomSheetWidth(),
    // 可添加其他配置，比如hasBackdrop、disableClose等
  };
  this.bottomSheet.open(YourBottomSheetComponent, config);
}

方案二：通过CSS媒体查询静态设置 #

如果你更倾向于纯样式控制，可以针对Material Bottom Sheet的容器类mat-bottom-sheet-container编写媒体查询，匹配对应的屏幕断点：

在全局样式文件（比如styles.scss）中添加：

/* xs断点（小于576px） */
@media (max-width: 575.98px) {
  .mat-bottom-sheet-container {
    width: 100% !important;
  }
}

/* sm断点（576px到767.98px） */
@media (min-width: 576px) and (max-width: 767.98px) {
  .mat-bottom-sheet-container {
    width: 55% !important;
  }
}

/* md断点（768px到991.98px） */
@media (min-width: 768px) and (max-width: 991.98px) {
  .mat-bottom-sheet-container {
    width: 65% !important;
  }
}

/* lg及以上断点（992px+） */
@media (min-width: 992px) {
  .mat-bottom-sheet-container {
    width: 70% !important;
  }
}

注意：如果要在组件样式文件中写，需要添加::ng-deep穿透样式隔离（Angular 12+也可以改用ViewEncapsulation.None）：

::ng-deep .mat-bottom-sheet-container {
  /* 媒体查询写在这里 */
}

两种方案各有优劣：方案一更灵活，能结合组件内的业务逻辑动态调整；方案二更直观，纯样式控制，适合不需要动态逻辑的场景。

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