Rejilla Fundación - Equipos Medio
El último capítulo hemos introducido pequeños dispositivos que utilizamos .small-* clase para establecer el índice de la rejilla de 25% / 75%:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
En el dispositivo de tamaño medio que se recomienda una proporción de 50% / 50%.
Consejo: El tamaño de la pantalla se define en el equipo de tamaño mediano 40.0625em a 64.0624em el medio.
equipos de tamaño mediano .medium-* categoría.
Ahora añadimos dos en un dispositivo de gama media:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
? En la instancia estableció dos columnas, la proporción era de 25% y 75% (Fundación es móvil en primer lugar: Si no se especifica, el equipo grande heredará .small código de clase):
La proporción de dispositivos pequeños% 25/75% ( .small-3 y .small-9 ). Sin embargo, la proporción de equipo de tamaño medio utilizado fue% 50/50% ( .medium-6 y .medium-6 ).
Ejemplos
<Div class = "pequeña-3 medio-6 columnas" style = "background-color: amarillo;">
<P> Este tutorial </ p>
</ Div>
<Div class = "pequeña-9 medianas-6 columnas" style = "background-color: rosa;">
<P> Este tutorial </ p>
</ Div>
</ Div>
Trate »
 | Nota: Para garantizar que el número de columnas se suman a 12! |
|---|
dispositivo ajustado para su uso en medianas
En el siguiente ejemplo, se especifica .medium-6 clase (no .small-* ). Esto indica que en la relación de equipos de mediano o grande de 50% / 50%. Sin embargo, en un pequeño dispositivo apilados horizontalmente (100% ancho):
Ejemplos
<Div class = "medio-6 columnas" style = "background-color: amarillo;">
<P> Este tutorial </ p>
</ Div>
<Div class = "medio-6 columnas" style = "background-color: rosa;">
<P> Este tutorial </ p>
</ Div>
</ Div>
Trate »