CSS: le unità Css Viewport – parte 3
| Titolo: | CSS: le unità Css Viewport – parte 3 |
| Sezione: | WEB |
| Data: | 07.11.2018 |
Semplifica i fogli di stile con le unità CSS ...
Semplifica i fogli di stile con le unità CSS Viewport – Parte 3
Colonne della stessa larghezza
Puoi usare le unità viewport per creare griglie responsive. Il comportamento è simile a quello basato sulla percentuale, ma il ridimensionamento avverrà sempre rispetto al viewport. Per esempio, è possibile posizionarli in un elemento padre ( più largo della finestra ) mantenendo la larghezza corretta della griglia. Questo soluzione può tornare utile quando si creano cursori a schermo intero; tecnica che richiede elementi con il float: left; per allinearli l’uno accanto all’altro:
Puoi usare le unità viewport per creare griglie responsive. Il comportamento è simile a quello basato sulla percentuale, ma il ridimensionamento avverrà sempre rispetto al viewport. Per esempio, è possibile posizionarli in un elemento padre ( più largo della finestra ) mantenendo la larghezza corretta della griglia. Questo soluzione può tornare utile quando si creano cursori a schermo intero; tecnica che richiede elementi con il float: left; per allinearli l’uno accanto all’altro:
.column-2{
float: left;
width: 50vw;
}
.column-4{
float: left;
width: 25vw;
}
.column-8{
float: left;
width: 12.5vw;
}
Conclusione
Le unità Viewport hanno i loro utilizzi e vale la pena di sperimentarle. Sono molto semplici da capire ma possono essere estremamente utili in determinate situazioni, dove le soluzioni con tecniche CSS alternative sarebbero più difficili o impossibili da implementare.
Kenji Agency : realizzazione siti web a Treviso