Foundation - Unterstützung für x (x) groß? - zurb-foundation

Ich habe begonnen, mit Foundation zu spielen, und mir wurde klar, dass es eine Möglichkeit gibt, größere Bildschirme zu unterstützen, aber ich weiß nicht, wie ich das aktivieren kann.

Was ich grundsätzlich tun möchte, ist in der Lage zu seinum größere Bildschirme (bis zu 1920px) zu adressieren und diese zusätzlichen Haltepunkte auf verschiedene Arten zu verwenden, wie zum Beispiel die Möglichkeit anzugeben, wie viele Elemente eines Blockrasters auf xxlarge, xlarge, large, ... angezeigt werden müssen

Ich habe die Einstellungsdatei überprüft und es gibt ein paar Dinge, die darauf hindeuten, dass es möglich ist.

Ich habe zuerst unkommentiert:

//$row-width: rem-calc(1000);

und setze es auf:

$row-width: rem-calc(1920);

Damit sehe ich, dass mein adressierbarer Bildschirm größer ist, aber Haltepunkte immer noch gleich sind.

Ich habe das auch unkommentiert:

$large-breakpoint:  em-calc(1440);
$xlarge-breakpoint: em-calc(1920);

...etc.. (und fast alles im Bereich der d.Media Abfragebereiche)

$include-xl-html-grid-classes: true;
$include-xl-html-block-grid-classes: true;

Aber selbst mit all diesen Möglichkeiten funktionieren Breakpoints immer noch nicht mit einer einfachen Sache:

<div class="row">
<div class="xlarge-12 columns">content</div>
</div>

Dies zeigt ein div von genau der gleichen Größe wie für large-12

Irgendeine Idee?

Vielen Dank Laurent

Antworten:

1 für die Antwort № 1

$row-width bezieht sich auf maximal Breite des Inhalts. Das Grundraster ist 12 Spalten, also jedes Div mit {size}-12 wird 100% breit sein. Dies ist der Grund, warum Large-12 und Xlarge-12 Divs die gleiche Breite haben.

Um den Inhalt auf großen Bildschirmen und auf großen Bildschirmen größer zu machen, versuchen Sie Folgendes:

<div class="row">
<div class="large-10 xlarge-12 columns">content</div>
</div>

Verwandte Fragen