Fundação Grid - Equipamento Médio
O último capítulo introduzimos pequenos dispositivos que usamos .small-*
classe para definir a relação de grade de 25% / 75%:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
No dispositivo de tamanho médio que é recomendável uma proporção de 50% / 50%.
Dica: O tamanho da tela é definida no equipamento de médio porte 40.0625em
para 64.0624em
entre.
equipamentos de tamanho médio .medium-*
categoria.
Agora vamos adicionar dois em um dispositivo de médio porte:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
? No caso configurar duas colunas, a proporção foi de 25% e 75% (Fundação é móvel em primeiro lugar: Se não for especificado, o grande equipamento de herdarão .small código de classe):
A proporção de pequenos dispositivos% 25/75% ( .small-3
e .small-9
). No entanto, a proporção de material de tamanho médio foi utilizado% 50/50% ( .medium-6
e .medium-6
).
Exemplos
<Div class = "small-3 meio-6 colunas" style = "background-color: amarelo;">
<P> Este tutorial </ p>
</ Div>
<Div class = "small-9 médio-6 colunas" style = "background-color: cor de rosa;">
<P> Este tutorial </ p>
</ Div>
</ Div>
tente »
Nota: Para garantir que o número de colunas adicionar até 12! |
dispositivo apertado para uso em médias
O exemplo a seguir, especificamos .medium-6
classe (não .small-*
). Isto indica que, em relação a equipamentos de médio ou grande de 50% / 50%. Mas em um pequeno dispositivo empilhado horizontalmente (largura de 100%):
Exemplos
<Div class = "média-6 colunas" style = "background-color: amarelo;">
<P> Este tutorial </ p>
</ Div>
<Div class = "média-6 colunas" style = "background-color: rosa;">
<P> Este tutorial </ p>
</ Div>
</ Div>
tente »