Fundación Grids - equipos de gran tamaño
El último capítulo se introduce la proporción de equipos de tamaño mediano y el diseño de equipos de cuadrícula pequeña, equipo pequeño para el 25% / 75% (.small-3 y .small-9), pero la proporción de equipos de tamaño medio para 50% / 50% (.medium-6 y .medium-6):
<div class="small-3 medium-6 columns">eses</div> <div class="small-9 medium-6 columns">eses</div>
En los equipos a gran escala, se recomienda una proporción de 33% / 66%.
Consejo: El tamaño de la pantalla es más grande que la definición de gran 64.0625em equipo.
El uso de equipos de gran tamaño .large-*
categoría.
Ahora añadimos dos en el equipo a gran escala:
<div class="small-3 medium-6 large-4 columns">eses</div> <div class="small-9 medium-6 large-8 columns">eses</div>
resolver
- La proporción de dispositivos pequeños con dos columnas de% 25/75% (
.small-3
y.small-9
) - La proporción de dispositivo de tamaño mediano con dos columnas de% 50/50% (
.medium-6
y.medium-6
) - La proporción de equipos de gran tamaño con dos columnas de% 33/66% (
.large-4
y.large-8
)
Ejemplos
<Div class = "pequeña-3 6 medio-columnas-4 grandes" style = "background-color: amarillo;">
<P> Este tutorial </ p>
</ Div>
<Div class = "pequeños-9 medio-6-8 grandes 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! |
uso apretado en equipos de gran tamaño
En el siguiente ejemplo, se especifica .large-6
clase (y no .medium- * .small-*
). Esto indica que una gran proporción de los equipos es 50% / 50%. Sin embargo, en el aparato de tamaño mediano o pequeño apilados horizontalmente (100% ancho):
Ejemplos
<Div class = "grandes-6 columnas" style = "background-color: amarillo;">
<P> Este tutorial </ p>
</ Div>
<Div class = "grandes-6 estilo de columnas" = "background-color: rosa;">
<P> Este tutorial </ p>
</ Div>
</ Div>
Trate »