Foundation Grid - Appareils moyens

Dans le chapitre précédent, nous avons présenté que sur les petits appareils, nous utilisons.small-*class pour définir le ratio de grille à 25%/75% :

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

Sur les appareils moyens, nous recommandons un ratio de 50%/50%.

Astuce :La définition de la taille d'écran pour les appareils moyens se trouve40.0625emà64.0624ementre.

Utilisé sur les appareils de taille moyenne.medium-*class.

Maintenant, nous ajoutons deux colonnes sur les appareils moyens :

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

L'exemple ci-dessus configure deux colonnes avec un ratio de 25% et 75% (Foundation est mobile-first : sauf indication contraire, sur les grands appareils, il héritera du code de la classe .small) :

Le ratio utilisé sur les petits appareils est de 25%/75% (.small-3et.small-9). Mais sur les appareils moyens, le ratio utilisé est de 50%/50% (.medium-6et.medium-6) 。

	Remarque :Assurez-vous que les colonnes totalisent 12 colonnes !

À utiliser uniquement sur les appareils moyens

Dans l'exemple suivant, nous avons spécifié.medium-6class (non.small-*). Cela indique que sur les appareils moyens ou grands, le ratio est de 50%/50%. Mais sur les petits appareils, elles s'empileront horizontalement (largeur 100%) :