角度材质工具栏高度问题答案

【问题标题】：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）

【问题讨论】：

标签： html css angularjs angular-material

【解决方案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 的想法。