logo
Federico Barberis

Web Designer

Professionista freelance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

Scarica il CV
 

Unità viewport: vw, vh, vmin, vmax

css

Unità viewport: vw, vh, vmin, vmax

In CSS3 le unità viewport (vw, vh, vmin, vmax) sono unità di misura basate sull’area in cui il browser renderizza il sito. Cioè il vostro schermo meno lo spazio riservato al browser.

A volte si vuole formattare un elemento in base a tale finestra, una sidebar, per esempio. Questo può essere fatto utilizzando una unità di cui siamo tutti a conoscenza: le percentuali.

Impostiamo l’altezza uguale alla viewport.

Che cosa c’è che non va qui? Perché l’html e il body richiedono un’altezza? Le percentuali sono relative alla sua proprietà parent. Quando l’altezza del parent è definita dai suoi child, non c’è una altezza nota da impostare, quindi l’altezza viene ignorata del tutto. Ciò significa che si dovrà impostare l’altezza su ogni elemento principale nella struttura del DOM. È qui che intervengono le nuove unità viewport.

Lunghezze Viewport-percentuali

Le unità viewport sono una nuova serie di unità progettate per i layout moderni: Siti One-Page, griglie a tutta larghezza, gestione corretta della tipografia, si basano sulle dimensioni della finestra. In precedenza, abbiamo affrontato queste sfide utilizzando le percentuali come detto in precedenza, o con JavaScript.

Questa nuova serie di unità consiste di quattro unità differenti. Due per ogni asse, ed un valore minimo e massimo per entrambe.

vw: 1 /100 della larghezza della viewport
vh: 1 /100 dell’altezza della viewport
vmin: 1/100 del lato più piccolo
Vmax: 1/100 del lato più grande

Nota: IE9 usa vm invece di vmin. Non supporta vmax.

Giusto per chiarire: 1 vmax uguale a 1 vh in modalità verticale, mentre in modalità orizzontale, 1 vmax sarà pari 1 vw.

Spero di avermi illuminato almeno in parte sulle possibilità fornite dalle nuove unità viewport

Federico Barberis
info@weblabdesign.net

Web designer free-lance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

Non ci sono commenti

Pubblica commento