如何在 MDC-Web (material-components-web) 中实现位置响应模式?
How to implement position responsive patterns in MDC-Web (material-components-web)?
请告诉我如何使用 material-components-web 来实现这个模式:
解决这个问题如下:
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>
@PavelB 的回答在较小的屏幕(即智能手机)上有一个小问题。主要部分与导航栏的内容重叠。
每个 .mdc-toolbar__row
在平板电脑和智能手机上的高度为 64px,但在智能手机上它的高度为 56px。
这可以使用媒体查询来解决,如下所示:
.demo-toolbar {
margin-bottom: -192px;
}
@media (max-width: 599px) {
.demo-toolbar {
margin-bottom: -168px;
}
}
编辑:这是 edited pen。
请告诉我如何使用 material-components-web 来实现这个模式:
解决这个问题如下:
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>
@PavelB 的回答在较小的屏幕(即智能手机)上有一个小问题。主要部分与导航栏的内容重叠。
每个 .mdc-toolbar__row
在平板电脑和智能手机上的高度为 64px,但在智能手机上它的高度为 56px。
这可以使用媒体查询来解决,如下所示:
.demo-toolbar {
margin-bottom: -192px;
}
@media (max-width: 599px) {
.demo-toolbar {
margin-bottom: -168px;
}
}
编辑:这是 edited pen。