响应导航与角8材料？

Question

我已经看到了各种实现(包括这个youtube)，它们使用媒体查询为角材料Sidenav实现响应导航。

对于角8，我们仍然需要自定义媒体查询/ CDK媒体查询来实现这一点，还是有一种方法可以以声明方式对组件执行此操作？

我的目标是实现一个响应sidenav，类似于角材料文献中使用的sidenav。

Answer 1

如果你读角示意图，你实际上可以用角材料产生响应的NAV。

Answer 2

您不能完全使用媒体查询，因为桌面、平板和移动设备之间的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元素的顺序，但不可能更改DOM结构。唯一的选择是在HTML中两次呈现侧边栏，这样您就可以显示一个用于桌面，另一个用于移动，但它本身并不是最佳实践。