[英]Angular material toolbar height issue
我使用角度材料v.1.1.0-RC.5。 我创建了简单的工具栏
<md-toolbar> </md-toolbar>
当浏览器宽度小于960p时,工具栏将其高度更改为48p。 它看起来合乎逻辑,虽然我希望我的工具栏始终保持相同的高度。
但是对我来说真正令人困惑的是 - 当浏览器宽度小于500p时 - 工具栏变得比以前更大(56p)!!
有一件事我注意到:浏览器高度应该大于274p才能重现这种行为。
这是一个问题吗?
是否可以禁用工具栏重定位?
实例 (确保内容区域高度大于274p)
您遇到的行为是因为触发了orientation
媒体查询。 这个位来自angular-material.css:
@media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
md-toolbar {
min-height: 56px; }
.md-toolbar-tools {
height: 56px;
max-height: 56px; } }
@media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
md-toolbar {
min-height: 48px; }
.md-toolbar-tools {
height: 48px;
max-height: 48px; } }
根据此文档,在这种情况下会触发:
指示视口是横向(显示是否宽于高)或纵向(显示高于宽)模式。
它还包含一个注释,实际上是您的特殊情况:
注意:此值与实际设备方向不对应。 在纵向打开大多数设备上的软键盘将导致视口变得比它高,从而导致浏览器使用横向样式而不是纵向。
您可以在css中指定高度来解决此问题。
md-toolbar{
min-height:64px;
max-height:64px
}
只需尝试将高度设置为8
倍数,因为材料设计使用8
倍数的所有大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.