Modal Layout Responsive in Angular Material

问题

I have a problem on the responsiveness of using modals in Angular Material. How can i make it look good on small screens. It doesn't have to be mat-grid

Pls see this stackblitz link

Click Here

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

回答1:

DemoYou can use media query in 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
   }
}

回答2:

If you want to use responsive layout, dont use mat-grid-list

回答3:

Please try if this is what you want:

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

For small devices you get the dialog 'as a page' with no border. For bigger devices the size is limited to a given value.

来源：https://stackoverflow.com/questions/61959287/modal-layout-responsive-in-angular-material