2016-07-02 5 views
4

角度材料v。1.1.0-RC.5を使用します。 ブラウザの幅が960p未満の場合、私はそれは48Pまでの高さだ、シンプルなツールバーにツールバーの変更を角材ツールバーの高さの問題

<md-toolbar> </md-toolbar> 

を作成しました。論理的に見えますが、ツールバーを常に同じ高さにする必要があります。
しかし、ブラウザの幅が500p未満の場合、私にとって本当に混乱しているのはです。ツールバーは直前(56p)よりも大きくなります!!

この現象を再現するには、ブラウザの高さを274pより大きくする必要があります。

問題ですか?
ツールバーの再作成を無効にすることはできますか?

Live example(コンテンツ領域の高さが274p以上であることを確認してください)

enter image description here

enter image description here

enter image description here

答えて

4

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ドキュメントによれば:

ビューポートは、(表示がそれよりも広い横にあるかどうかを示し高さが高い)またはポートレート(表示が幅よりも大きい)モードに設定されます。

また、それは実際にあなたの特定のケースであることに注意してください含まれています

注:この値は、実際のデバイスの向きに対応していません。ほとんどのデバイスでソフトキーボードを縦向きに開くと、ビューポートの幅が広くなり、ブラウザがポートレートではなく横長のスタイルを使用します。

+0

なぜこのように動作するのか説明してくれてありがとうございます。実際に私はこの行動は大丈夫ですか?ブラウザの幅に関係なくツールバーを同じ高さにすることはできますか? –

+0

ツールバーを固定サイズにするには、@ nextt1の方法を参考にしてください。しかし、この隙間は[fluid material design]のアイデアを打ち破ってしまいます(https://material.google.com/layout/structure.html#構造体のapp-bar)。 –

3

この問題を解決するには、高さをCSSで指定できます。

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

ただ、材料設計が8の倍数ですべてのサイズを使用していますよう8の倍数に高さを設定してみてください。

作業の例http://codepen.io/next1/pen/pbwjKV

関連する問題