Capacidade de resposta integrada W3.CSS
O W3.CSS inclui um sistema de grade responsivo e móvel para lidar com o layout:
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
descanso
1/4
descanso
100px
45px
descanso
Classes responsivas W3.CSS
O sistema de grade do W3.CSS é responsivo e as colunas serão reorganizadas automaticamente dependendo do tamanho da tela:
Classe | Descrição |
---|---|
w3-metade | 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-dois terços | Ocupa 2/3 da janela (em telas médias e grandes) |
w3-quarto | Ocupa 1/4 da janela (em telas médias e grandes) |
w3-três quartos | Ocupa 3/4 da janela (em telas médias e grandes) |
w3-descanso | Ocupa o restante da largura da coluna |
w3-col | Define uma coluna em uma grade responsiva de 12 colunas |
w3-móvel | Adiciona capacidade de resposta móvel a uma célula (coluna). Exibe elementos como elementos de bloco em dispositivos móveis. |
As classes responsivas acima devem ser colocadas dentro de uma classe w3-row (ou classe w3-row-padding ) para serem totalmente responsivas.
Classe | Descrição |
---|---|
w3-linha | Container para classes responsivas, sem preenchimento |
w3-row-preenchimento | Contêiner para classes responsivas, com preenchimento esquerdo e direito de 8px |
w3-conteúdo | Contêiner para conteúdo centrado em tamanho fixo |
w3-esconder-pequeno | Oculta conteúdo em telas pequenas (menos de 601px) |
w3-ocultar-médio | Esconde o conteúdo em telas médias |
w3-esconder-grande | Oculta conteúdo em telas grandes (maiores que 992px) |
l1 - l12 | Tamanhos responsivos para telas grandes |
m1 - m12 | Tamanhos responsivos para telas médias |
s1 - s12 | Tamanhos responsivos para telas pequenas |
A classe w3-meia
A largura da classe w3-half é 1/2 do elemento pai (style="width:50%").
Em telas menores que 601 pixels, ele é redimensionado para 100%.
w3-metade
w3-metade
Exemplo
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
A classe w3-terceira
A largura da terceira classe w3 é 1/3 do elemento pai (style="width:33.33%").
Em telas menores que 601 pixels, ele é redimensionado para 100%.
w3-terço
w3-terço
w3-terço
Exemplo
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
A classe w3-two-terceiro
A largura da classe w3-twothird é 2/3 do elemento pai (style="width:66.66%").
Em telas menores que 601 pixels, ele é redimensionado para 100%.
w3-dois terços
w3-terço
Exemplo
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
A classe w3-quartos
A largura da classe w3-quarter é 1/4 do elemento pai (style="width:25%").
Em telas menores que 601 pixels, ele é redimensionado para 100%.
w3-quarto
w3-quarto
w3-quarto
w3-quarto
Exemplo
<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>
A classe w3-três quartos
A largura da classe w3-threequarter é 3/4 do elemento pai (style="width:75%").
Em telas menores que 601 pixels, ele é redimensionado para 100%.
w3-três quartos
w3-quarto
Exemplo
<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>
Combinações
w3-quarto
w3-metade
w3-quarto
w3-quarto
w3-quarto
w3-metade
w3-metade
w3-quarto
w3-quarto
Linhas aninhadas
Exemplo: w3-half Dentro de w3-half
<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>
Colunas usando descanso
A classe w3-col define uma coluna em uma grade responsiva de 12 colunas.
A classe w3-rest ocupará o restante da largura:
eu sou 150px
eu sou o resto
Exemplo
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div>
Colunas usando porcentagem
Você também pode usar a propriedade de largura do CSS para definir a largura em porcentagem:
20%
60%
20%
Exemplo
<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>
A classe de conteúdo w3
A classe w3-content define um contêiner para conteúdo centrado em tamanho fixo. Use a propriedade CSS max-width para substituir a largura padrão (980px).
Exemplo
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3-row vs. w3-row-preenchimento
A classe w3-row define um contêiner sem preenchimento, enquanto a classe w3-row-padding adiciona um preenchimento esquerdo e direito de 8px a cada coluna:
w3-linha:
w3-terço
w3-terço
w3-terço
w3-row-preenchimento:
w3-terço
w3-terço
w3-terço
w3-linha:
w3-row-preenchimento:
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_snowtops.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_snowtops.jpg"></div>
</div>
Esticar linhas acolchoadas
A classe w3-stretch remove as margens direita e esquerda de um elemento. Esta classe é frequentemente usada para esticar uma linha acolchoada:
Um exemplo com alongamento w3:
Um exemplo sem w3-stretch:
Exemplo
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div>
Responsivo Mostrar / Ocultar
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.