2016-12-02 24 views
0

Ich arbeite mit Foundation-12-Spalten-Raster und es funktioniert wie erwartet - ich habe das Logo als Large-4 und Medium-6 Spalte und dann volle 12 Spalten für kleine Bildschirm . Alles ist großartig, außer wenn ich mein iPhone in die Querformat-Ausrichtung drehe und das Logo dann zu groß (groß) ist, um in den Bildschirm zu passen, da es immer noch ein "kleiner" Bildschirm ist, also die gesamte Breite des Bildschirms einnimmt und ist daher zu groß für den Bildschirm (da es so groß wie breit ist).Foundation 12-Spalten-Gitter Größe ändern Problem

Also meine Frage ist, was ist der beste Weg, um das zu beheben? Wenn ich eine Abfrage für Ausrichtungsmedien verwende, um sie für Landschaftsbildschirme kleiner zu machen, ist sie auf einem großen Landschaftsbildschirm (wie einem Laptop oder Computerbildschirm) zu klein. Auch wenn es nicht die vollen 12 Spalten für die kleine Bildschirmgröße ist, dann ist es im Hochformat auf einem mobilen Gerät zu klein.

Danke.

(Ansicht Vollbild und die Größe oder Blick auf Telefon, das Problem zu sehen.)

See CodePen here

<!---->

http://codepen.io/mrseanbaines/pen/dOdoEy

Antwort

1

Es gibt ein paar Möglichkeiten, wie Sie ansprechen können das ... wenn du eine Menge Dinge hast, von denen du denkst, du würdest sie dir wünschen Dazu können Sie einen benutzerdefinierten Haltepunkt für diese Zwischenstufe hinzufügen (siehe http://foundation.zurb.com/sites/docs/media-queries.html#sass-variables).

Das heißt, wenn Sie nur in bestimmten das Bild wollen Ziel, es gut ausreichend sein könnte nur auf eine maximale Höhe zu bringen, so etwas wie

#logo { 
    margin-bottom: 20px; 
    max-height: 50vh; 
} 
+0

Das ist genial! Vielen Dank, hat perfekt funktioniert. Ich habe daran gearbeitet, indem ich eine Medienabfrage nur für Bildschirmbreiten von bis zu 640 Pixeln UND in Querformat hinzugefügt habe, aber die maximale Ansichtsfensterhöhe ist viel einfacher, danke. :) – Sean