Classi responsive
W3.CSS include un sistema mobile reattivo prima griglia per gestire il 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
riposo
1/4
riposo
100px
45px
riposo
sistema di griglia di W3.CSS è sensibile, e le colonne si ri-organizzare automaticamente in base alle dimensioni dello schermo:
| Classe | Descrizione |
|---|---|
| w3-mezzo | Occupa 1/2 della finestra (sugli schermi medie e grandi) |
| w3 terzo | Occupa 1/3 della finestra (sugli schermi medie e grandi) |
| w3-twothird | Occupa 2/3 della finestra (sugli schermi medie e grandi) |
| w3 trimestre | Occupa 1/4 della finestra (sugli schermi medie e grandi) |
| w3-tre quarti | Occupa 3/4 della finestra (sugli schermi medie e grandi) |
| w3-riposo | Definisce il resto di una riga |
| w3-Col | Definisce una colonna in una griglia di fluido reattivo 12 colonne (più in un capitolo successivo) |
Righe responsive
classi Responsive devono essere posizionati all'interno di un w3-fila per essere pienamente reattivo.
| Classe | Descrizione |
|---|---|
| w3-fila | Definisce un contenitore padding-meno per le classi reattivi. |
| w3-row-padding | Definisce un contenitore imbottito per classi di reattivi. |
Il w3 metà Class
La larghezza della classe w3-tempo è 1/2 dell'elemento genitore (style = "width: 50%").
Su piccoli schermi * si ridimensiona a 100%.
w3-mezzo
w3-mezzo
Esempio
<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> Prova tu stesso " Il w3-terza classe
La larghezza della w3-terza classe è 1/3 dell'elemento genitore (style = "width: 33.33%").
Su piccoli schermi * si ridimensiona a 100%.
w3 terzo
w3 terzo
w3 terzo
Esempio con w3 terzo
<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> Prova tu stesso " La classe w3-twothird
La larghezza della classe w3-twothird è 2/3 dell'elemento genitore (style = "width: 66.66%").
Su piccoli schermi * si ridimensiona a 100%.
w3-twothird
w3 terzo
Esempio con w3 terzo
<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> Prova tu stesso " La classe w3 trimestre
La larghezza della classe w3 quarto è 1/4 dell'elemento genitore (style = "width: 25%").
Su piccoli schermi * si ridimensiona a 100%.
w3 trimestre
w3 trimestre
w3 trimestre
w3 trimestre
Esempio con 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> Prova tu stesso " La classe w3-tre quarti
La larghezza della classe w3-threequarter è 3/4 dell'elemento genitore (style = "width: 75%").
Su piccoli schermi * si ridimensiona a 100%.
w3 trimestre
w3 trimestre
Esempio con w3-tre quarti
<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> Prova tu stesso " combinazioni
w3 trimestre
w3-mezzo
w3 trimestre
w3 trimestre
w3 trimestre
w3-mezzo
w3-mezzo
w3 trimestre
w3 trimestre
Righe nidificati
Esempio: w3 metà All'interno w3 metà
<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> Prova tu stesso " Colonne utilizzando Riposo
Sono 150px
Io sono il resto
Esempio con 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> Prova tu stesso " Colonne utilizzando Percentuale
20%
60%
20%
Esempio di utilizzo per 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> Prova tu stesso " La classe w3-contenuti
La classe w3-contenuti definisce un contenitore per il contenuto fisso formato centrato:
Differenza tra w3-fila e w3-row-padding
La classe w3-riga definisce un contenitore imbottito meno, mentre la classe w3-fila-padding aggiunge un'imbottitura 8px sinistra ea destra per ogni colonna:
w3-fila:
w3-row-padding:
Esempio
<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> Prova tu stesso " 12 colonna della griglia liquido reattivo
W3.CSS supporta anche un 12 colonna della griglia liquido reattivo avanzato.
Ridimensionare la pagina per vedere l'effetto!
Questa parte occuperà 12 colonne su un piccolo schermo, 4 da uno schermo medio e 3 su un grande schermo.
Questa parte occuperà 12 colonne su un piccolo schermo, 8 su uno schermo medio e 9 su un grande schermo.
Imparerete di più sulla griglia fluida in un capitolo successivo.
* Risoluzione video
La reattività incorporata della W3.CSS utilizza la dimensione DP di uno schermo.
W3.CSS tratterà un iPhone 6 con una risoluzione di 750 x 1334 pixel come un piccolo schermo di 375 x 667 pixel.
Schermi di piccole dimensioni sono meno di 601 pixel DP, schermi medi sono meno di 993 pixel DP.
Di seguito è riportato un elenco di risoluzioni tipiche dei dispositivi e ha riferito dimensioni DP:
iphone 4
Risoluzione
640 x 960
DP
320 x 480
iphone 5
Risoluzione
640 x 1136
DP
320 x 528
iPhone 6
Risoluzione
750 x 1334
DP
375 x 667
iphone 6s
Risoluzione
1080 x 1920
DP
414 x 736
Galaxy S6
Risoluzione
1440 x 2560
DP
360 x 640
Nota 4
Risoluzione
1440 x 2560
DP
400 x 853
Nexus 6
Risoluzione
1440 x 2560
DP
411 x 731
Ipad mini
Risoluzione
768 x 1024
DP
768 x 1024
iPad
Risoluzione
1536 x 2048
DP
728 x 1024
Laptop tipica
Risoluzione
1366 x 768
DP
1366 x 768
Desktop tipica
Risoluzione
1920 x 1080
DP
1920 x 1080