Grid-Stiftung - Medium Ausrüstung
Das letzte Kapitel stellten wir kleine Geräte , die wir verwenden .small-* Klasse das Raster - Verhältnis von 25% / 75% eingestellt werden :
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Auf mittlere Gerät, das wir ein Verhältnis von 50% / 50% empfehlen.
Tipp: Die Bildschirmgröße ist in der mittleren Ausstattung definiert 40.0625em zu 64.0624em zwischen.
Mittelständische Ausrüstung .medium-* Kategorie.
Nun fügen wir zwei auf einem Midrange-Gerät:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
? In dem Fall zwei Spalten eingerichtet, das Verhältnis 25% und 75% (Foundation ist mobil erste: Wenn nicht anders angegeben, wird die große Ausrüstung .small Klasse Code erben) betrug:
Der Anteil der kleinen Geräten% 25/75% ( .small-3 und .small-9 ). Allerdings verwendet der Anteil der mittleren Ausstattung war% 50/50% ( .medium-6 und .medium-6 ).
Beispiele
<Div class = "small-3 mittel 6 Spalten" style = "background-color: gelb;">
<P> Dieses Tutorial </ p>
</ Div>
<Div class = "small-9 mittel 6 Spalten" style = "background-color: rosa;">
<P> Dieses Tutorial </ p>
</ Div>
</ Div>
Versuchen »
 | Hinweis: Um sicherzustellen , dass die Anzahl der Spalten hinzufügen bis zu 12! |
|---|
Enge Gerät für den Einsatz auf mittelgroßen
Das folgende Beispiel, wir geben .medium-6 - Klasse (nicht .small-* ). Dies zeigt, dass in der mittleren oder großen Anlagen-Verhältnis von 50% / 50%. Aber auf einem kleinen Gerät horizontal gestapelt (100% Breite):
Beispiele
<Div class = "Medium-6 Spalten" style = "background-color: gelb;">
<P> Dieses Tutorial </ p>
</ Div>
<Div class = "Medium-6 Spalten" style = "background-color: rosa;">
<P> Dieses Tutorial </ p>
</ Div>
</ Div>
Versuchen »