Angular Material 中的模态布局响应 [英] Modal Layout Responsive in Angular Material

问题描述

我对在 Angular Material 中使用模态的响应能力有疑问.我怎样才能让它在小屏幕上看起来很好.它不必是 mat-grid

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

请查看此 stackblitz 链接

Pls see this stackblitz link

点击此处

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

推荐答案

演示你可以在 style.css 中使用媒体查询

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

这篇关于Angular Material 中的模态布局响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！