46 258
contributi
Differenze tra le versioni di "Aiuto:Manuale di stile/Avanzato"
Aiuto:Manuale di stile/Avanzato (visualizza wikitesto)
Versione delle 12:05, 4 set 2018
, 12:05, 4 set 2018→Width responsive
(→{{!}}) |
|||
|
<nowiki>
<div class="width-xl-20 width-lg-40 width-md-66 width-sm-80 width-xs-100" style="background: #
</nowiki>
<span class="hidden-lg">'''xl''':</span><span class="visible-lg hidden-md">'''lg''':</span><span class="visible-md hidden-sm">'''md''':</span><span class="visible-sm hidden-xs">'''sm''':</span><span class="visible-xs">'''xs''':</span>
<div class="width-xl-20 width-lg-40 width-md-66 width-sm-80 width-xs-100" style="background: #
È importante notare che questa percentuale non è riferita all'intera larghezza dello schermo, ma alla larghezza del contenitore; nell'esempio seguente lo stesso elemento con larghezza variabile è contenuto in un padre con larghezza fissa al 60% dello schermo. Ovviamente valgono le stesse considerazioni se il padre ha a sua volta una larghezza variabile.
<nowiki>
<div class="width-xl-60" style="background: #999; padding: 0.2em;">padre
<div class="width-xl-20 width-lg-40 width-md-66 width-sm-80 width-xs-100" style="background: #bbb;">elemento</div></div>
</nowiki>
<span class="hidden-lg">'''xl''':</span><span class="visible-lg hidden-md">'''lg''':</span><span class="visible-md hidden-sm">'''md''':</span><span class="visible-sm hidden-xs">'''sm''':</span><span class="visible-xs">'''xs''':</span>
<div class="width-xl-60" style="background: #999; padding: 0.2em;">padre
<div class="width-xl-20 width-lg-40 width-md-66 width-sm-80 width-xs-100" style="background: #bbb;">elemento</div></div>
Buona parte dei layout responsive presenti qui su Pokémon Central Wiki è realizzata semplicemente sfruttando le width responsive abbinate ai <code>flex</code>, che permettono di allineare per bene i vari pezzi.
| |||