Classes Responsive
W3.CSS inclui um sistema de primeira grade ágil, móvel para lidar com a sua disposição:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
descansar
1/4
descansar
100px
45px
descansar
sistema de rede de W3.CSS é sensível, e as colunas serão re-organizar automaticamente, dependendo do tamanho da tela:
| Classe | Descrição |
|---|---|
| W3-meia | Ocupa 1/2 da janela (em telas médias e grandes) |
| W3 terço | Ocupa 1/3 da janela (em telas médias e grandes) |
| w3-twothird | Ocupa 2/3 da janela (em telas médias e grandes) |
| w3 trimestre | Ocupa 1/4 da janela (em telas médias e grandes) |
| w3-threequarter | Ocupa 3/4 da janela (em telas médias e grandes) |
| w3-rest | Define o resto de uma linha |
| w3-col | Define uma coluna em uma grade fluídica responsivo 12 coluna (mais em um capítulo posterior) |
linhas Responsive
aulas Responsive deve ser colocado dentro de um w3-linha para responder plenamente.
| Classe | Descrição |
|---|---|
| w3-row | Define um recipiente padding-menos para as classes de resposta. |
| w3-row-estofamento | Define uma caixa acolchoada, para as classes de resposta. |
O W3-meia Classe
A largura da classe w3-metade é 1/2 do elemento pai (style = "width: 50%").
Em telas pequenas * que redimensiona a 100%.
W3-meia
W3-meia
Exemplo
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> Tente você mesmo " O w3 de terceira classe
A largura da w3 de terceira classe é 1/3 do elemento pai (style = "width: 33,33%").
Em telas pequenas * que redimensiona a 100%.
W3 terço
W3 terço
W3 terço
Exemplo usando w3 terço
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Tente você mesmo " A classe w3-twothird
A largura da classe w3-twothird é 2/3 do elemento pai (style = "width: 66,66%").
Em telas pequenas * que redimensiona a 100%.
w3-twothird
W3 terço
Exemplo usando w3 terço
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Tente você mesmo " A classe w3 trimestre
A largura da classe w3 quarto é 1/4 do elemento pai (style = "width: 25%").
Em telas pequenas * que redimensiona a 100%.
w3 trimestre
w3 trimestre
w3 trimestre
w3 trimestre
Exemplo usando w3 trimestre
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Tente você mesmo " A classe w3-threequarter
A largura da classe w3-threequarter é 3/4 do elemento pai (style = "width: 75%").
Em telas pequenas * que redimensiona a 100%.
w3 trimestre
w3 trimestre
Exemplo usando w3-threequarter
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Tente você mesmo " combinações
w3 trimestre
W3-meia
w3 trimestre
w3 trimestre
w3 trimestre
W3-meia
W3-meia
w3 trimestre
w3 trimestre
linhas aninhados
Exemplo: W3-meia Dentro W3-meia
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> Tente você mesmo " Colunas usando REST
Estou 150px
Eu sou o resto
Exemplo usando w3-rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> Tente você mesmo " Colunas Utilizar percentagem
20%
60%
20%
Exemplo usando cento
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> Tente você mesmo " A classe w3-content
A classe de conteúdo W3 define um recipiente para o conteúdo tamanho centrais fixos:
Diferença entre w3-linha e w3-row-estofamento
A classe w3-linha define um recipiente acolchoado-less, enquanto a classe w3-row-preenchimento adiciona um preenchimento 8px esquerda e direita a cada coluna:
w3-fila:
w3-row-padding:
Exemplo
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div> Tente você mesmo " grade fluido responsivo 12 Coluna
W3.CSS também suporta um 12 coluna de grelha fluido responsivo avançado.
Redimensionar a página para ver o efeito!
Esta parte vai ocupar 12 colunas em uma tela pequena, 4 em uma tela de médio e 3 em uma tela grande.
Esta parte vai ocupar 12 colunas em uma tela pequena, 8 em uma tela de médio e 9 em uma tela grande.
Você vai aprender mais sobre a grade de fluido em um capítulo posterior.
* Resolução de tela
A capacidade de resposta embutido de W3.CSS utiliza o tamanho DP de uma tela.
W3.CSS irá tratar um iPhone 6, com uma resolução de 750 x 1334 pixels como uma pequena tela de 375 x 667 pixels.
Pequenas telas são menos de 601 pixels DP, telas médias estão a menos de 993 pixels DP.
Abaixo está uma lista de resoluções de dispositivos típicos e relatou tamanhos DP:
iphone 4
Resolução
640 x 960
DP
320 x 480
iphone 5
Resolução
640 x 1136
DP
320 x 528
iphone 6
Resolução
750 x 1334
DP
375 x 667
iphone 6s
Resolução
1080 x 1920
DP
414 x 736
Galaxy S6
Resolução
1440 x 2560
DP
360 x 640
Nota 4
Resolução
1440 x 2560
DP
400 x 853
Nexus 6
Resolução
1440 x 2560
DP
411 x 731
Mini iPad
Resolução
768 x 1024
DP
768 x 1024
iPad
Resolução
1536 x 2048
DP
728 x 1024
Laptop típica
Resolução
1366 x 768
DP
1366 x 768
desktop típico
Resolução
1920 x 1080
DP
1920 x 1080