如何以不同的分辨率指定材料 2 底片的宽度

Question

我的页面分为两个垂直窗格。左右窗格响应不同的分辨率。

 <div fxLayout="row" fxFlexFill  fxLayout.xs="column" >
  <div fxFlex="20" class="width" fxFlex.sm="45" fxFlex.md="35" fxFlex.lg ="30" >
      left div  
  </div>
  <div fxFlex="80"  fxFlex.sm="55" fxFlex.md="65" fxFlex.lg ="70">
       //div rendering bottomsheet
  </div>

我在我的组件中像这样打开底页

openBottomSheet() {
   this.closeBottomSheet();
   const config: MatBottomSheetConfig = {
   hasBackdrop: false,
   disableClose: false,
   panelClass: 'bottom-sheet-container',
   direction: 'ltr'
  };
 this.matRef = this._bottomSheet.open(DiagnosticCompanionComponent, config);
}

这是底页容器类：

  .bottom-sheet-container {
    // margin-left: 465px !important;
       position: absolute;
       bottom: 0px;
       right: 10px;
       width: calc(100vw - 485px) !important;
       min-width: 0% !important;
   }

早些时候，我的左侧 div 的固定宽度为“485px”，因此我能够在剩余空间中渲染底部工作表。但是现在我已经使页面具有响应性，我无法弄清楚如何为 angular flex-layout 中的不同分辨率指定底页宽度。

Answer 1

Angular Material 会根据您的屏幕大小自动添加以下类：

.mat-bottom-sheet-container-medium {
  min-width: 384px;
  max-width: calc(100vw - 128px)
}

.mat-bottom-sheet-container-large {
  min-width: 512px;
  max-width: calc(100vw - 256px)
}

.mat-bottom-sheet-container-xlarge {
  min-width: 576px;
  max-width: calc(100vw - 384px)
}

只需将此代码添加到您的 styles.css / styles.scss 并根据需要更改值。

Answer 2

我能够通过编写如下所示的媒体查询来解决我的问题。但我不确定这是否是最好的方法

 .bottom-sheet-container {
 // margin-left: 465px !important;
   position: absolute;
   bottom: 0px;
   right: 10px;
   width: 78%;
   @media screen and (min-width: 600px) and (max-width: 959px) {
     width : 51%;
    }
   @media screen and (min-width: 960px) and (max-width: 1279px) {
     width : 62%;
    }
  @media screen and (min-width: 1280px) and (max-width: 1919px) {
     width : 67%;
    }

   // width: calc(100vw - 485px) !important;
    min-width: 0% !important;
    z-index: 0 !important;
}

Answer 3

试试这个。

::ng-deep .mat-bottom-sheet-container{
  min-width: 100vw!important;
}