我见过各种实现 (Including this youtube)，它们使用媒体查询为 Angular Material Sidenav 实现响应式导航。
对于 Angular 8，我们是否仍需要自定义媒体查询/CDK 媒体查询来实现这一点，还是有办法使用组件以声明方式实现它？
我的目标是实现一个类似于Angular Material Documentation 中使用的响应式侧导航。
【问题讨论】：
标签： javascript html css angular typescript
如果您阅读 Angular schematics，您实际上可以使用 Angular Material 生成响应式 NAV 栏
【讨论】：
您无法完全使用媒体查询，因为桌面、平板和移动设备之间的 DOM 结构通常不同。
例如，这是一个带有侧边栏的桌面。
+-----+----------+
| | |
| | |
| | |
| | |
+-----+----------+
DOM 结构可能是这样的：
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
当我们切换到类似移动设备时，侧边栏经常重叠与.container，以便用户可以打开或关闭侧边栏。侧边栏显示在容器的顶部，有时会有一个变暗的背景覆盖。
DOM 结构可能是这样的：
<div class="sidebar"></div>
<div class="container">
<div class="content"></div>
</div>
使用 flex 布局可以修改 DOM 元素的 order，但无法更改 DOM 结构。唯一的替代方法是在 HTML 中渲染两次侧边栏，这样您就可以为桌面显示一个，另一个用于移动设备，但这本身并不是最佳做法。
【讨论】：