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

Question

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

Link on Material.io

Answer 1

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

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

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

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

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

编辑：这里是edited pen。