在Angular Material中如何正确使用媒体查询？

前端开发 2026-07-08

我正在用Angular Material做一个项目，使用CSS文件来进行样式处理。我的媒体查询是这样的：

@media (width <= 768px) {
  .desktop-menu {
    display: none;
  }
}

然而，在手动定义断点时，总觉得有点不对劲，因为 Angular Material已经定义了断点。不过我在文档中找不到解决方案。

我知道可以使用 BreakpointObserver 作为替代方案，并且通过这种方式访问预定义的断点。不过，我想要在不管屏幕尺寸如何都渲染所有内容，因此我想用媒体查询。

我查看了这些看起来相关的问题，但没有找到使用媒体查询的答案：

由于我使用的是CSS而不是SCSS，甚至没有定义mixins的选项。因此，我最终在多个CSS文件中出现了媒体查询。似乎应该有一个简单直接的方法来实现这一点，但我找不到。其他UI组件库通常会提供一个输入，可以轻松地为特定断点设置 display: none。

解决方案

与其他组件库不同，Angular Material不提供用于跨断点切换可见性的组件输入。Angular Material的目标是提供符合Material Design规范的行为和结构性构件，这并不包含布局引擎。事实上，Angular团队曾经维护过一个姊妹库，叫做 @angular/flex-layout，但为了更简单地使用现代CSS而被弃用。

以下是可能的替代方案：

使用SCSS和 mixins，以避免在多个文件中重复媒体查询，如同问题中所述。
添加一个轻量级的工具框架，如Tailwind（参见“在Angular Material UI与 Tailwind CSS一起使用”）。
使用 BreakpointObserver 来按条件设置CSS类或属性，而不是用于条件渲染。例如，你可以在小屏幕上给某个元素应用一个名为 hide 的类。这甚至可以在根组件中全局实现，你可以像 <body data-breakpoint="xs"> 那样写。然后可以使用类似 body[data-breakpoint="xs"] .desktop-menu {} 的选择器来隐藏一个元素。（这是一个已知的响应式UI模式。例如，它是 Quasar框架提供的响应式UI方案之一。）

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。