Reattività integrata W3.CSS
W3.CSS include un sistema di griglia mobile first reattivo 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
Classi reattive W3.CSS
Il sistema di griglia di W3.CSS è reattivo e le colonne si riorganizzeranno automaticamente in base alle dimensioni dello schermo:
| Classe | Descrizione |
|---|---|
| w3-metà | Occupa 1/2 finestra (su schermi medi e grandi) |
| w3-terzo | Occupa 1/3 della finestra (su schermi medi e grandi) |
| w3-dueterzo | Occupa 2/3 della finestra (su schermi medi e grandi) |
| w3-trimestre | Occupa 1/4 della finestra (su schermi medi e grandi) |
| w3-tre quarti | Occupa 3/4 della finestra (su schermi medi e grandi) |
| w3-riposo | Occupa il resto della larghezza della colonna |
| w3-col | Definisce una colonna in una griglia reattiva a 12 colonne |
| w3-mobile | Aggiunge la reattività mobile first a una cella (colonna). Visualizza gli elementi come elementi di blocco sui dispositivi mobili. |
Le classi reattive sopra devono essere inserite all'interno di una classe w3-row (o classe w3-row-padding ) per essere completamente reattive.
| Classe | Descrizione |
|---|---|
| w3-riga | Contenitore per classi reattive, senza riempimento |
| w3-riga-imbottitura | Contenitore per classi reattive, con riempimento sinistro e destro di 8px |
| contenuto w3 | Contenitore per contenuto centrato a dimensione fissa |
| w3-nascondi-piccolo | Nasconde il contenuto su schermi piccoli (meno di 601px) |
| w3-nascondi-mezzo | Nasconde il contenuto su schermi medi |
| w3-nascondi-grande | Nasconde il contenuto su schermi di grandi dimensioni (più grande di 992px) |
| l1 - l12 | Dimensioni reattive per schermi di grandi dimensioni |
| m1 - m12 | Dimensioni reattive per schermi medi |
| s1 - s12 | Dimensioni reattive per schermi piccoli |
La classe w3-metà
La larghezza della classe w3-half è 1/2 dell'elemento padre (style="width:50%").
Su schermi inferiori a 601 pixel si ridimensiona al 100%.
w3-metà
w3-metà
Esempio
<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>
La classe w3-terza
La larghezza della classe w3-terza è 1/3 dell'elemento padre (style="width:33.33%").
Su schermi inferiori a 601 pixel si ridimensiona al 100%.
w3-terzo
w3-terzo
w3-terzo
Esempio
<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>
La classe w3-dueterza
La larghezza della classe w3-twothird è 2/3 dell'elemento padre (style="width:66.66%").
Su schermi inferiori a 601 pixel si ridimensiona al 100%.
w3-dueterzo
w3-terzo
Esempio
<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>
La classe w3-quarto
La larghezza della classe w3-quarter è 1/4 dell'elemento padre (style="width:25%").
Su schermi inferiori a 601 pixel si ridimensiona al 100%.
w3-trimestre
w3-trimestre
w3-trimestre
w3-trimestre
Esempio
<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>
La classe w3-tre quarti
La larghezza della classe w3-threequarter è 3/4 dell'elemento padre (style="width:75%").
Su schermi inferiori a 601 pixel si ridimensiona al 100%.
w3-tre quarti
w3-trimestre
Esempio
<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>
Combinazioni
w3-trimestre
w3-metà
w3-trimestre
w3-trimestre
w3-trimestre
w3-metà
w3-metà
w3-trimestre
w3-trimestre
Righe nidificate
Esempio: metà w3 Dentro metà w3
<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>
Colonne che utilizzano Rest
La classe w3-col definisce una colonna in una griglia reattiva a 12 colonne.
La classe w3-rest occuperà il resto della larghezza:
Sono 150px
io sono il resto
Esempio
<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>
Colonne che utilizzano la percentuale
Puoi anche utilizzare la proprietà CSS width per impostare la larghezza in percentuale:
20%
60%
20%
Esempio
<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>
La classe w3-content
La classe w3-content definisce un contenitore per contenuto centrato a dimensione fissa. Utilizza la proprietà CSS max-width per sovrascrivere la larghezza predefinita (980px).
Esempio
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3-riga vs. w3-riga-padding
La classe w3-row definisce un contenitore senza padding, mentre la classe w3-row-padding aggiunge un padding sinistro e destro di 8px a ciascuna colonna:
riga w3:
w3-terzo
w3-terzo
w3-terzo
w3-riga-imbottitura:
w3-terzo
w3-terzo
w3-terzo
riga w3:
w3-riga-imbottitura:
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_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>
Righe imbottite elastiche
La classe w3-stretch rimuove i margini destro e sinistro da un elemento. Questa classe viene spesso utilizzata per allungare una riga imbottita:
Un esempio con w3-stretch:
Un esempio senza w3-stretch:
Esempio
<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>
Mostra/nascondi reattivo
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.