Angular Material 模态布局响应

Question

我对在 Angular Material 中使用模式的响应能力有疑问。我怎样才能让它在小屏幕上看起来不错。它不一定是垫网格

请看这个 stackblitz link

Click Here

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

Answer 1

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
   }
}

Answer 2

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

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

对于小型设备，您会看到没有边框的对话框 'as a page'。 对于更大的设备，大小被限制为给定值。

Answer 3

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