Design de página web responsiva - visão de grade
- Página anterior Visão RWD
- Próxima página Consultas de mídia RWD
O que é visão de grade?
Muitas páginas web são baseadas na visão de grade (grid-view), o que significa que a página é dividida em várias colunas:
Ao projetar páginas web, usar a visão de grade é muito útil. Isso permite que os elementos sejam colocados mais facilmente na página.
A visão de grade responsiva geralmente tem 12 colunas, uma largura total de 100%, e se contrai e estica ao ajustar o tamanho da janela do navegador.
Construção de visão de grade responsiva
Vamos começar a construir uma visão de grade responsiva.
Primeiro, certifique-se de que todos os elementos HTML box-sizing
a propriedade é configurada como border-box
Dessa forma, garantimos que o total de largura e altura dos elementos inclua margem interna (preenchimento) e borda.
Adicione o seguinte código no CSS:
* { box-sizing: border-box; }
Por favor, visite nosso Box Sizing do CSS Leia mais sobre a propriedade box-sizing no capítulo.
O exemplo a seguir ilustra uma página web responsiva simples, que contém duas colunas:
Exemplo
.menu { largura: 25%; float: left; } .main { largura: 75%; float: left; }
如果网页只包含两列,则上面的例子还不错。
但是,我们希望使用拥有 12 列的响应式网格视图,来更好地控制网页。
Primeiro,我们必须计算一列的百分比:100% / 12 列 = 8.33%。
Então, criamos uma classe para cada uma das 12 colunas, ou seja class="col-"
e um número, que define o número de colunas que essa seção deve cruzar:
CSS:
.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}
Todas essas colunas devem flutuar para a esquerda e ter 15px de margem interna:
CSS:
[class*="col-"] { float: left; padding: 15px; border: 1px solid red; }
Cada linha deve ser envolta em <div>
O número total de colunas inline deve somar 12:
HTML:
<div class="row"> <div class="col-3">...</div> <!-- 25% --> <div class="col-9">...</div> <!-- 75% --> </div>
Todas as colunas inline flutuam para a esquerda, o que as remove do fluxo da página e coloca outros elementos, como se essas colunas não existissem. Para evitar isso, adicionamos estilos de limpeza de fluxo:
CSS:
.row::after { content: ""; clear: both; display: table; }
Gostaríamos de adicionar alguns estilos e cores para torná-lo mais bonito:
Exemplo
html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; }
Atenção, quando você ajusta a largura da janela do navegador para um tamanho muito pequeno, a página do exemplo não parece ideal. No próximo capítulo, você aprenderá como resolver esse problema.
- Página anterior Visão RWD
- Próxima página Consultas de mídia RWD