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">dede</div> <div class="small-9 columns">dede</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">dede</div> <div class="small-9 medium-6 columns">dede</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 »