如何在较小的屏幕上调整 MAT DIALOG 的大小答案

【问题标题】：How to resize the MAT DIALOG on smaller screens如何在较小的屏幕上调整 MAT DIALOG 的大小
【发布时间】：2021-12-20 00:04:20
【问题描述】：

这是我的 component.html 文件：

<div class="button">
  <button (click)="openPopUp()" mat-button class="readBtn">Buy Now</button>
</div>

这就是 .ts 文件。

openPopUp() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.width="60%";
    this.dialog.open(GetBuyDetailsComponent, dialogConfig);
}

单击按钮时，我将打开名为 GetBuyDetails 的 Mat 对话框。但是这个 GetBuyDetails Pop-up 或 Mat Dialog 没有响应，因为它的宽度总是 60%。如何使 Mat Dialog 组件具有响应性。

【问题讨论】：

我不太明白你的问题。你能提供更多细节吗？据我了解和复制，它是响应式的——这意味着它的宽度始终为实际屏幕尺寸的 60%。你想达到什么目标？或者您能否提供您的 css 文件 - 正如我看到的按钮有一个 readBtn 类 - 如果那里有一些覆盖，这可能是问题。
@vazsonyidl 是的，它总是有 60% 的宽度，这在小屏幕上看起来很可怕，所以我想要的是在较小的屏幕上宽度从 60% 变为 80%。我想实现这一目标。

标签： css angular typescript angular-material

【解决方案1】：

好的，据我了解，您有两个解决方案。

根据doc，您有两种选择——您必须决定哪一种更适合您。

1.覆盖对话框的panelClass。

这很容易实现，您可以将样式存储在组件目录中，解决方案如下：

component-style.scss

        ::ng-deep .my-custom-panel {
          width: 70%;
        
    // your custom logic - this is a sketch
          @media screen and (max-width: 660px){
            width: 100%;
          }
        }

.component.ts

      openPopUp() {
        this.dialog.open(<your component>, {
          disableClose: true,
          autoFocus: true,
          panelClass: 'my-custom-panel'
        });
      }

这里的主要问题是您无法将样式限定为组件，每个.my-custom-panel 样式都将被全局覆盖。

2。为此使用全局样式

可能会更好一些，但您必须在全局 styles.(s)css 中定义覆盖类，您应该在其中省略 ::ng-deep 修饰符。从那时起，您可以简单地遵循前面的逻辑。

我肯定会选择第二个，因为使用不带任何修饰符的::ng-deep（例如:host）已被Angular 弃用，这是一个不太好的解决方案。

希望对您有所帮助，如有任何疑问，请发表评论。

【讨论】：

【解决方案2】：

为什么不使用像dialogConfig.width="360px" 这样的像素？它还可以响应任何设备宽度。

【讨论】：