CSS: le unità Css Viewport – parte 2

Titolo:	CSS: le unità Css Viewport – parte 2
Sezione:	WEB
Data:	03.11.2018

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

Semplifica i fogli di stile con le unità CSS Viewport – Parte 2

Dimensione del child relativa al browser, non al parent
In determinate situazioni, vorreste ridimensionare un elemento figlio rispetto alla finestra, e non al suo genitore. Questo non funzionerà:

#parent{
    width: 400px;
}
#child { 
    /* Questo avrà il 100% della larghezza del parent, non dell'intera pagina. */ 
    width: 100%; 
}

Se invece usiamo l’unità di misura vw, il nostro elemento figlio e occuperà tutta la larghezza della pagina baipassando il genitore:

#parent{
    : 400px;
}
{
    /* Questo avrà il 100% della larghezza dell'intera pagina */
    width: 100vw;
}

Dimensione responsiva del carattere
Le unità Viewport possono essere utilizzate anche sul testo! In questo esempio abbiamo impostato la dimensione del carattere in vw creando un carattere respnsivo.

h2.testo-responsivo{
    font-size: 6vw;
}
h4.testo-responsivo{
    font-size: 3vw;
}

Centratura verticale responsiva
Impostando la larghezza, l’altezza e i margini di un elemento in unità viewport, puoi centrarlo senza utilizzare altri trucchi.

Questo rettangolo ha un’altezza di 60vh e margini superiore e inferiore di 20vh, che somma fino a 100vh (60 + 2 * 20) rendendolo sempre centrato, anche sul ridimensionamento della finestra.

#rectangle{
    width: 60vw;
    height: 60vh;
    margin: 20vh auto;
}

Kenji Agency : realizzazione siti web a Treviso