Foundation Grid - Dispositivos medianos
En el capítulo anterior presentamos que en dispositivos pequeños usamos.small-*la clase para configurar, la proporción de cuadrícula es 25%/75%:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
En dispositivos medianos recomendamos una proporción del 50%/50%.
Consejo:El tamaño de pantalla de los dispositivos medianos se define entre40.0625emllegar64.0624emy.
En dispositivos medianos se usa.medium-*clase.
Ahora agregamos dos columnas en dispositivos medianos:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
El ejemplo anterior configuró dos columnas con proporciones de 25% y 75% (Foundation es móvil primero: si no se especifica lo contrario, en dispositivos grandes se hereda el código de la clase .small):
La proporción utilizada en dispositivos pequeños es 25%/75% (.small-3y.small-9). Pero en dispositivos medianos la proporción utilizada es 50%/50%.medium-6y.medium-6) 。
Ejemplo
<div class="small-3 medium-6 columns" style="background-color:yellow;">
<p>Ejemplo</p>
</div>
<div class="small-9 medium-6 columns" style="background-color:pink;">
<p>Ejemplo</p>
</div>
</div>
Pruébalo »
 |
Nota:¡Asegúrate de que la suma de las columnas sea 12 columnas! |
|---|
Usar solo en dispositivos medianos
En el siguiente ejemplo especificamos.medium-6clase (no.small-*). Esto indica que en dispositivos medianos o grandes la proporción será del 50%/50%. Pero en dispositivos pequeños se apilarán verticalmente (100% de ancho):
Ejemplo
<div class="medium-6 columns" style="background-color:yellow;">
<p>Ejemplo</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>Ejemplo</p>
</div>
</div>
Pruébalo »