如何更改仅适用于移动视图的 Angular Material 对话框的宽度和高度？

Question

我正在开发一个 Angular 应用程序并使用 Angular Material 作为 UI。我想调整对话框的宽度和高度，但仅限于移动视图。我不知道如何仅调整移动视图的大小，同时保持桌面视图不变。我想知道如何最好地实现这个场景。在此先感谢您的帮助！更改 CSS 中的宽度或高度属性也不会影响对话框的宽度或高度。

Answer 1

为此，您可以将

panelClass

的

MatDialogConfig

属性与 CSS 中的

@media only

结合使用

示例：

//component.ts
import { MatDialog } from "@angular/material/dialog";

constructor(private dialog: MatDialog) {}

public openDialog() {
  return this.dialog.open(DialogComponent, { panelClass: "mobile-width" });
}

// in css
@media only screen and (max-width: 760px) {
    .mobile-width {
        width: 200px;
    }
}