Latest web development tutorials

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 = "linha">
<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 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 = "linha">
<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 »