Griglia Fondazione - Attrezzature Media
L'ultimo capitolo abbiamo introdotto dispositivi di piccole dimensioni usiamo .small-*
classe per impostare il rapporto di griglia di 25% / 75%:
<div class="small-3 columns">itit</div> <div class="small-9 columns">itit</div>
Sul dispositivo di medie dimensioni che si consiglia un rapporto di 50% / 50%.
Suggerimento: La dimensione dello schermo è definita nelle apparecchiature di medie dimensioni 40.0625em
per 64.0624em
mezzo.
apparecchiature di medie dimensioni .medium-*
categoria.
Ora aggiungiamo due su un dispositivo di fascia media:
<div class="small-3 medium-6 columns">itit</div> <div class="small-9 medium-6 columns">itit</div>
? Nel caso istituito due colonne, il rapporto era 25% e il 75% (Fondazione è mobile prima: Se non specificato, la grande apparecchiatura erediterà .small codice della classe):
La proporzione di piccoli dispositivi% 25/75% ( .small-3
e .small-9
). Tuttavia, la percentuale di apparecchiature medie utilizzato è% 50/50% ( .medium-6
e .medium-6
).
Esempi
<Div class = "piccola-3 medio-6 colonne" style = "background-color: yellow;">
<P> Questo tutorial </ p>
</ Div>
<Div class = "small-9 medie-6 colonne" style = "background-color: rosa;">
<P> Questo tutorial </ p>
</ Div>
</ Div>
Prova »
Nota: per garantire che il numero di colonne aggiungere fino a 12! |
Dispositivo stretto per l'uso su medie dimensioni
L'esempio seguente, specifichiamo .medium-6
di classe (non .small-*
). Ciò indica che nel rapporto medio o grande apparecchiatura del 50% / 50%. Ma su un piccolo dispositivo orizzontalmente impilato (larghezza 100%):
Esempi
<Div class = "medio-6 colonne" style = "background-color: yellow;">
<P> Questo tutorial </ p>
</ Div>
<Div class = "medio-6 colonne" style = "background-color: rosa;">
<P> Questo tutorial </ p>
</ Div>
</ Div>
Prova »