角材料工具栏高度问题

我使用角材料v.1.1.0-RC.5。我创建简单的工具栏角材料工具栏高度问题

<md-toolbar> </md-toolbar>

当浏览器宽度小于960P，工具栏改变它的高度，以48P。它看起来合乎逻辑，但我希望我的工具栏始终保持相同的高度。
但是，真正让我困惑的是 - 当浏览器宽度小于500p时，- 工具栏变得比以前更大（56p）！

我注意到一件事：浏览器高度应该大于274p才能重现此行为。

这是问题吗？
是否有可能禁用工具栏resing？

Live example（确保内容区高度大于274p）

来源

2016-07-02 Taras Kohut

你的经验发生，因为orientation媒体查询被触发的行为。该位是从角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文档它得到在这种情况下触发：

表示视口是否是横向（显示比它更宽是高的）还是肖像（显示比宽度高）模式。

此外，它包含了一张纸条，上面实际上是你的具体情况：

注意：此值不符合实际的设备方向。在纵向打开大多数设备上的软键盘将导致视口变得比高度更宽，从而导致浏览器使用横向样式而不是纵向。

来源

2016-07-03 12:32:27

感谢您解释为什么它以这种方式工作。其实我很有趣的是这种行为好吗？无论浏览器宽度如何，我可以让我的工具栏达到相同的高度吗？ –

您可以使用下面建议的方法@ nextt1将您的工具栏设为固定大小，但我会说这个窗台打破了[流体材质设计]的思路（https://material.google.com/layout/structure.html#结构-APP-巴）。 –

你可以在CSS中指定高度来解决这个问题。

md-toolbar{ 
min-height:64px; 
max-height:64px 
}

只是尝试设置高度的8多为材料，设计使用在8多个各种规模。

工作实例。 http://codepen.io/next1/pen/pbwjKV

来源

2016-07-03 18:22:45 nextt1

角材料工具栏高度问题

回答

相关问题