WEB

CSS: le unità Css Viewport – parte 1

Semplifica i fogli di stile con le unità CSS ... leggi a seguire ->

Utilizzare-viewport-vh-siti-web-treviso

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

Share this Post:

Articoli correlati