CSS: le unità Css Viewport – parte 1

Titolo:	CSS: le unità Css Viewport – parte 1
Sezione:	WEB
Data:	26.10.2018

Semplifica i fogli di stile con le unità CSS Viewport Le unità ...

Semplifica i fogli di stile con le unità CSS Viewport

Le unità di Viewport sono presenti da alcuni anni e ora sono supportate da tutti i principali browser; offrendo funzionalità uniche che possono essere utili in situazioni specifiche, in particolare per la realizzazione di siti responsivi.

Il viewport è l’area del browser in cui viene visualizzato il contenuto effettivo, in altre parole il browser Web senza barre degli strumenti e pulsanti. Le unità sono vw, vh, vmin e vmax e rappresentano una percentuale delle dimensioni del browser adattandosi di conseguenza al ridimensionamento della finestra.Diciamo che abbiamo una finestra di 1200px ( larghezza ) per 900px ( altezza ):vw – Rappresenta l’1% della larghezza della finestra. Nel nostro caso 50vw = 600px.
vh – Una percentuale dell’altezza della finestra. 50vh = 450 px.
vmin – Una percentuale del minimo dei due.
vmax – Una percentuale della dimensione più grande.
Ovunque si possono specificare valori in pixel, come larghezza, altezza, margine, dimensione del carattere si possono utilizzare le unità viewport.

Vediamo qualche esempio pratico: per prendere l’intera altezza della pagina si è portati ad utilizzare questo #id { height: 100%; } . Come sappiamo queste regole non funzioneranno a meno che non aggiungiamo un’altezza del 100% al body e all’html. Con vh è sufficiente impostare l’ altezza a 100 vh
#id { height: 100 vh; }

In questo modo il nostro elemento sarà alto come la finestra del browser.

Kenji Agency : realizzazione siti web a Treviso