角度材质工具栏高度问题
Posted
技术标签:
【中文标题】角度材质工具栏高度问题【英文标题】:Angular material toolbar height issue 【发布时间】:2016-11-05 00:07:39 【问题描述】:我使用角度材料 v. 1.1.0-RC.5。 我创建了简单的工具栏
<md-toolbar> </md-toolbar>
当浏览器宽度小于 960p 时,工具栏将其高度更改为 48p。它看起来合乎逻辑,尽管我希望我的工具栏始终保持相同的高度。 但真正让我感到困惑的是 - 当浏览器宽度小于 500p 时 - 工具栏变得比之前更大(56p)!!
我注意到一件事:浏览器高度应大于 274p 才能重现此行为。
这是一个问题吗? 是否可以禁用工具栏重新设置?
Live example (确保内容区域高度大于274p)
【问题讨论】:
【参考方案1】:你可以在css中指定高度来解决这个问题。
md-toolbar
min-height:64px;
max-height:64px
只需尝试将高度设置为8
的倍数,因为材料设计使用8
的倍数的所有尺寸。
工作示例。 http://codepen.io/next1/pen/pbwjKV
【讨论】:
【参考方案2】:您遇到的行为是因为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;
根据this 文档,它会在这种情况下触发:
指示视口是处于横向(显示器比它高)还是纵向(显示器比它宽)模式。
它还包含一个实际上是您的特殊情况的注释:
注意:此值与实际设备方向不对应。在大多数设备上以纵向打开软键盘会导致视口变得比高度更宽,从而导致浏览器使用横向样式而不是纵向样式。
【讨论】:
感谢您解释它为什么会这样工作。其实我很有趣这种行为好吗?无论浏览器宽度如何,我可以让我的工具栏保持相同的高度吗? 您可以通过下面建议的@nextt1 方法将工具栏设置为固定大小,但我想说这打破了fluid material design 的想法。以上是关于角度材质工具栏高度问题的主要内容,如果未能解决你的问题,请参考以下文章