如何在MDC Web（材料组件Web）中实现位置响应模式？

请告诉我如何使用material components web实现此模式：

---

解决此问题的方法如下：

CSS

HTML

标题

---

@PavelB answer在较小屏幕上有一个小问题，即智能手机。主要部分与导航栏的内容重叠

在平板电脑和智能手机上，每行的高度为64px，而在智能手机上，每行的高度为56px

这可以通过媒体查询来解决，如下所示：

.demo-toolbar {
    margin-bottom: -192px;     
}

@media (max-width: 599px) {
    .demo-toolbar {
        margin-bottom: -168px;     
    }  
}

编辑：这是答案

<header class="mdc-toolbar demo-toolbar">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      <a href="#" class="material-icons">menu</a>
      <span class="mdc-toolbar__title">Title</span>
    </section>
  <div class="mdc-toolbar__row"> </div>
  <div class="mdc-toolbar__row"> </div>
  <div class="mdc-toolbar__row"> </div>
</header>

.demo-toolbar {
    margin-bottom: -192px;     
}

@media (max-width: 599px) {
    .demo-toolbar {
        margin-bottom: -168px;     
    }  
}