Angular Material Toolbar Höhe Ausgabe

Ich verwende eckiges Material v. 1.1.0-RC.5. Ich habe einfache SymbolleisteAngular Material Toolbar Höhe Ausgabe

<md-toolbar> </md-toolbar>

Wenn Browser Breite als 960p weniger ist, Symbolleiste 48p es Höhe ändern. Es sieht logisch aus, obwohl ich möchte, dass meine Symbolleiste immer die gleiche Höhe hat.
Aber was ist wirklich verwirrend für mich - wenn Browser Breite ist weniger als 500p - Toolbar größer als kurz zuvor (56p)!

Eine Sache, die ich bemerkte: Browserhöhe sollte größer als 274p sein, um dieses Verhalten zu reproduzieren.

Ist es ein Problem?
Und ist es möglich, Toolbar Resing zu deaktivieren?

Live example (stellen Sie sicher, dass Inhaltsbereich Höhe größer als 274p)

Quelle

2016-07-02 Taras Kohut

Das Verhalten, das Sie Erfahrung geschieht, weil die orientation Medienabfrage ausgelöst wird . Dieses Bit ist von dem Winkel 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; } }

Nach this Dokumentation es in solchen Fällen ausgelöst wird:

Gibt an, ob das Bildfenster in der Landschaft ist (das Display ist breiter als ist groß) oder Hochformat (der Bildschirm ist größer als breit).

Auch enthält es eine Notiz, die tatsächlich Ihren speziellen Fall ist:

Hinweis: Dieser Wert entspricht nicht der tatsächlichen Ausrichtung des Geräts. Wenn Sie die Soft-Tastatur bei den meisten Geräten im Hochformat öffnen, wird das Ansichtsfenster breiter als hoch, wodurch der Browser Landschaftsstile anstelle von Hochformat verwendet.

Quelle

2016-07-03 12:32:27

danke für die Erklärung, warum es so funktioniert. Eigentlich bin ich interessant, ist dieses Verhalten ok? Und kann ich meine Symbolleiste unabhängig von der Browserbreite auf die gleiche Höhe bringen? –

Sie können Ihre Symbolleiste mit der unten vorgeschlagenen Methode @ nextt1 in eine feste Größe bringen, aber ich würde sagen, dass diese Schwelle die Idee von [Fluid Material Design] bricht (https://material.google.com/layout/structure.html#). Struktur-App-Leiste). –

Sie können die Höhe in CSS angeben, um dieses Problem zu lösen.

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

Versuchen Sie einfach Höhe einzustellen, in Vielfachen von 8 als Material-Design alle Größen in Vielfachen von 8 verwendet.

Arbeitsexemplar. http://codepen.io/next1/pen/pbwjKV

Quelle

2016-07-03 18:22:45 nextt1

Angular Material Toolbar Höhe Ausgabe

Antwort

Verwandte Themen