如何在 MDC-Web（material-components-web）中实现位置响应模式？答案

【问题标题】：How to implement position responsive patterns in MDC-Web (material-components-web)?如何在 MDC-Web（material-components-web）中实现位置响应模式？
【发布时间】：2017-09-30 20:44:04
【问题描述】：

请告诉我如何使用 material-components-web 来实现这个模式：

Link on Material.io

【问题讨论】：

标签： web material-components

【解决方案1】：

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

每个.mdc-toolbar__row 在平板电脑和智能手机上的高度为 64 像素，但在智能手机上其高度为 56 像素。

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

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

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

编辑：这是edited pen。

【讨论】：

【解决方案2】：

解决了这个问题如下：

CSS

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

HTML

<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>

https://codepen.io/anon/pen/jmwgjQ

【讨论】：