Angular Material中的模态布局响应答案

【问题标题】：Modal Layout Responsive in Angular MaterialAngular Material中的模态布局响应
【发布时间】：2020-09-09 13:06:12
【问题描述】：

我对在 Angular Material 中使用模态的响应性有疑问。我怎样才能让它在小屏幕上看起来不错。它不一定是 mat-grid

请查看此 stackblitz 链接

Click Here

  openDialog() {
    const dialogRef = this.dialog.open(ModalComponent, {
      width: "650px",
      height: "380px"
    });
  }

【问题讨论】：

使用include-media可以更简洁地做响应式界面，例如stackblitz.com/edit/…
@Radik。那是另一个包裹吗？
是的，我将其升级到最新版本以启用 scss 文件
太棒了！它的包很好，但如果您依赖许多包，它会使您的应用程序更大。但无论如何。谢谢

标签： css angular angular-material angular8 angular-flex-layout

【解决方案1】：

如果你想使用响应式布局，不要使用 mat-grid-list

【讨论】：

【解决方案2】：

如果这是您想要的，请尝试：

openDialog() {
    const dialogRef = this.dialog.open(ModalComponent, {
        width: "100vw",
        height: "100vh",
        maxWidth: "650px",
        maxHeight: "900px"
    });

对于小型设备，您会看到没有边框的“作为页面”的对话框。对于较大的设备，大小限制为给定值。

【讨论】：

这不是真正的响应，是吗？
它是响应式的。小型设备 -> 整页，更大的屏幕 -> 更小的对话框

【解决方案3】：

Demo可以在style.css中使用媒体查询

 @media only screen and (max-width: 700px) {
  .modal .mat-grid-tile {
     width:100% !important;
     position:relative!important;  
     left:0 !important; 
  }
  .modal .mat-form-field {
    width: 100%
  }
  .modal .mat-radio-button {
    padding: 10px;
  }
  .modal .mat-raised-button.mat-warn {
       margin:5px
   }
}

【讨论】：