角材料工具欄高度問題

我使用角材料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

角材料工具欄高度問題

回答

相關問題