Classes Responsive
W3.CSS comprend, un premier système de grille mobile en réponse à gérer votre mise en page:
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
le repos
1/4
le repos
100px
45px
le repos
Le système de grille de W3.CSS est sensible, et les colonnes se réarranger automatiquement en fonction de la taille de l'écran:
| Classe | La description |
|---|---|
| w3 demi- | Occupe 1/2 de la fenêtre (sur les écrans moyennes et grandes) |
| w3 tiers | Occupe 1/3 de la fenêtre (sur les écrans moyennes et grandes) |
| w3 twothird | Occupe 2/3 de la fenêtre (sur les écrans moyennes et grandes) |
| w3 trimestre | Occupe 1/4 de la fenêtre (sur les écrans moyennes et grandes) |
| w3-threequarter | Occupe 3/4 de la fenêtre (sur les écrans moyennes et grandes) |
| w3 repos | Définit le reste d'une rangée |
| w3-col | Définit une colonne dans un fluide réactif grille 12 de colonne (plus dans un chapitre ultérieur) |
rangées Responsive
les classes Responsive doivent être placés à l'intérieur d'un w3-ligne pour répondre pleinement.
| Classe | La description |
|---|---|
| w3 rangée | Définit un conteneur de padding-moins pour les classes sensibles. |
| w3-row-padding | Définit un conteneur rembourrée pour les classes sensibles. |
La moitié w3 Classe
La largeur de la w3 demi-classe est 1/2 de l'élément parent (style = "width: 50%").
Sur les petits écrans * redimensionne à 100%.
w3 demi-
w3 demi-
Exemple
<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> Try It Yourself » Le w3-troisième classe
La largeur de la w3-troisième classe est 1/3 de l'élément parent (style = "width: 33,33%").
Sur les petits écrans * redimensionne à 100%.
w3 tiers
w3 tiers
w3 tiers
Exemple avec w3 tiers
<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> Try It Yourself » La classe w3-twothird
La largeur de la classe w3-twothird est 2/3 de l'élément parent (style = "width: 66,66%").
Sur les petits écrans * redimensionne à 100%.
w3 twothird
w3 tiers
Exemple avec w3 tiers
<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> Try It Yourself » Le w3 quart classe
La largeur de la classe w3 quart est de 1/4 de l'élément parent (style = "width: 25%").
Sur les petits écrans * redimensionne à 100%.
w3 trimestre
w3 trimestre
w3 trimestre
w3 trimestre
Exemple avec w3 quart
<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> Try It Yourself » La classe w3 threequarter
La largeur de la classe w3-threequarter est 3/4 de l'élément parent (style = "width: 75%").
Sur les petits écrans * redimensionne à 100%.
w3 trimestre
w3 trimestre
Exemple avec 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> Try It Yourself » Combinaisons
w3 trimestre
w3 demi-
w3 trimestre
w3 trimestre
w3 trimestre
w3 demi-
w3 demi-
w3 trimestre
w3 trimestre
Les lignes imbriquées
Exemple: demi-w3 intérieur w3 demi-
<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> Try It Yourself » Colonnes Utilisation Rest
Je suis 150px
Je suis le reste
Exemple avec w3 repos
<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> Try It Yourself » Colonnes Utilisation Pourcentage
20%
60%
20%
Exemple d'utilisation pour cent
<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> Try It Yourself » La classe w3-contenu
La classe w3-contenu définit un conteneur pour la taille centrée contenu fixe:
Différence entre w3-ligne et w3-row-padding
La classe w3 rangée définit un conteneur rembourrée-moins, tandis que la classe w3-row-padding ajoute un rembourrage 8px gauche et à droite à chaque colonne:
w3 rangée:
w3-row-padding:
Exemple
<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> Try It Yourself » 12 Colonne grille de fluide sensible
W3.CSS supporte également une grille 12 colonne de fluide en réponse avancée.
Redimensionner la page pour voir l'effet!
Cette partie occupera 12 colonnes sur un petit écran, 4 sur un écran moyen, et 3 sur un grand écran.
Cette partie occupera 12 colonnes sur un petit écran, 8 sur un écran moyen, et 9 sur un grand écran.
Vous en apprendrez plus sur la grille de fluide dans un chapitre ultérieur.
* Résolutions d'écran
La réactivité intégrée de W3.CSS utilise la taille DP d'un écran.
W3.CSS traitera un iPhone 6 avec une résolution de 750 x 1334 pixels comme un petit écran de 375 x 667 pixels.
Les petits écrans sont à moins de 601 pixels DP, écrans moyennes sont inférieures à 993 pixels DP.
Voici une liste des résolutions typiques de l'appareil et a rapporté tailles DP:
iphone 4
Résolution
640 x 960
DP
320 x 480
iPhone 5
Résolution
640 x 1136
DP
320 x 528
iphone 6
Résolution
750 x 1334
DP
375 x 667
Iphone 6s
Résolution
1080 x 1920
DP
414 x 736
Galaxy S6
Résolution
1440 x 2560
DP
360 x 640
Note 4
Résolution
1440 x 2560
DP
400 x 853
Nexus 6
Résolution
1440 x 2560
DP
411 x 731
ipad mini
Résolution
768 x 1024
DP
768 x 1024
iPad
Résolution
1536 x 2048
DP
728 x 1024
Ordinateur portable typique
Résolution
1366 x 768
DP
1366 x 768
bureau typique
Résolution
1920 x 1080
DP
1920 x 1080