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”，因此我可以在剩余的空间中渲染我的底层。但是现在我已经做了页面响应，我无法弄清楚，如何在角度flex-layout中为不同分辨率指定底部页面宽度。

Answer 1

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

 .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 2

尝试一下。

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

Answer 3

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并根据需要更改值即可。

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

3 个答案: