Latest web development tutorials

Fundação Grids - equipamentos de grande porte

O último capítulo introduzimos a proporção de equipamentos de tamanho médio e layout pequenos equipamentos grid, pequenos equipamentos para a 25% / 75% (.small-3 e .small-9), mas a proporção de equipamentos de tamanho médio para 50% / 50% (.medium-6 e .medium-6): 

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

Em equipamentos de grande porte, recomendamos uma proporção de 33% / 66%.

Dica: O tamanho da tela é maior do que a definição de grande 64.0625em equipamento.

O uso de equipamentos de grande porte .large-* categoria.

Agora vamos adicionar dois sobre o equipamento em larga escala: 

<div class="small-3 medium-6 large-4 columns">....</div>
<div class="small-9 medium-6 large-8 columns">....</div>

resolver

  • A proporção de pequenos dispositivos com duas colunas de% 25/75% ( .small-3 e .small-9 )
  • A proporção de dispositivo de tamanho médio com duas colunas de% 50/50% ( .medium-6 e .medium-6 )
  • A proporção de equipamentos de grande porte com duas colunas de% 33/66% ( .large-4 e .large-8 )

Exemplos

<Div class = "linha">
<Div class = "-3 pequeno style =" background-color: amarelo; "-6 médio colunas-4 large">
<P> Este tutorial </ p>
</ Div>
<Div class = "pequenos-9 meio-6 grandes-8 colunas" style = "background-color: rosa;">
<P> Este tutorial </ p>
</ Div>
</ Div>

tente »
nota Nota: Para garantir que o número de colunas adicionar até 12!

uso apertada em equipamentos de grande porte

O exemplo a seguir, especificamos .large-6 classe (e não .medium- * .small-* ). Isto indica que uma grande proporção do equipamento é 50% / 50%. Mas no aparelho de tamanho médio ou pequeno horizontalmente empilhadas (largura de 100%):

Exemplos

<Div class = "linha">
<Div class = "large-6 colunas" style = "background-color: amarelo;">
<P> Este tutorial </ p>
</ Div>
<Div class = "large-6 colunas" style = "background-color: rosa;">
<P> Este tutorial </ p>
</ Div>
</ Div>

tente »