Fondation Grid - Équipement moyen
Le dernier chapitre , nous avons introduit les petits appareils que nous utilisons .small-* classe pour définir le rapport de grille de 25% / 75%:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
Sur l'appareil de taille moyenne que nous recommandons un rapport de 50% / 50%.
Astuce: La taille de l' écran est définie dans l'équipement de taille moyenne 40.0625em à 64.0624em entre.
Moyennes équipements .medium-* catégorie.
Maintenant, nous ajoutons deux sur un dispositif de milieu de gamme:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
? Dans le cas mis en place deux colonnes, le rapport était de 25% et 75% (Fondation est le premier mobile: Si non spécifié, le grand équipement va hériter .small code de classe):
La proportion de petits appareils% 25/75% ( .small-3 et .small-9 ). Toutefois, la proportion d'équipements de taille moyenne utilisée était% 50/50% de ( .medium-6 et .medium-6 ).
Exemples
<Class Div = "small-3 moyenne 6 colonnes" style = "background-color: yellow;">
<P> Ce tutoriel </ p>
</ Div>
<Div class = "small-9 moyennes-6 colonnes" style = "background-color: rose;">
<P> Ce tutoriel </ p>
</ Div>
</ Div>
Essayez »
 | Remarque: Pour veiller à ce que le nombre de colonnes ajouter jusqu'à 12! |
|---|
Dispositif étanche pour une utilisation sur de taille moyenne
L'exemple suivant, nous précisons .medium-6 classe (non .small-* ). Ceci indique que dans le rapport d'équipement moyenne ou grande de 50% / 50%. Mais sur un petit appareil empilés horizontalement (largeur de 100%):
Exemples
<Class Div = "moyenne-6 colonnes" style = "background-color: yellow;">
<P> Ce tutoriel </ p>
</ Div>
<Class Div = "moyenne-6 colonnes" style = "background-color: rose;">
<P> Ce tutoriel </ p>
</ Div>
</ Div>
Essayez »