Le unità di misura
Nel responsive design le unità di misura: PX, REM, EM, VW e VH hanno un ruolo fondamentale ed è importante capirne le logiche d’uso; attraverso alcuni esempi comprenderemo le differenze e i contesti di applicazione. Quando parliamo di dimensioni, in ambito digitale, la prima unità di misura a venirci in mente è il PX, si tratta di una unità di misura assoluta, non scalabile, che può diventare difficile da gestire in ottica responsive. REM, EM, VW, VH, invece, sono unità di misura relative e quindi più duttili e, se combinate con le media queries, consentono la creazione di layout e testi facilmente gestibili e scalabili.
Iniziamo a fare chiarezza su REM e EM, unità sulle quali spesso si fa confusione, entrambi sono unità di misura di dimensione flessibile e possiamo pensarle come come dei moltiplicatori di un numero base.
REM: qual è il numero base da moltiplicare? L’unità è relativa solo alla dimensione del carattere radice del documento; “R” in REM sta per “root”, radice, e la sua dimensione dipende dall’elemento radice che nel documento è l’elemento HTML, quindi il numero base da moltiplicare è il font-size dell’elemento HTML. La dimensione del carattere predefinita dell’elemento radice è 16px, di conseguenza se HTML ha impostata una dimensione font di 16px questa, in quel documento, equivale a 1rem. Se scrivessimo 3rem avremo 3*16px = 48px. Se cambiassimo la dimensione del carattere dell’elemento radice, l’unità REM restituirà ovviamente un’altra dimensione, se avessimo la dimensione font di 20px per l’elemento HTML avremo 3*20px = 60px.
html {
font-size: 16px;
}
.millennium {
font-size: 1rem;
}
/** calcolo 1 rem * 16px = 16px **/I vantaggi dell’approccio tramite REM sono evidenti, ci consente di ridimensionare rapidamente un intero progetto semplicemente impostando la dimensione del carattere radice una volta per ogni media query.
/* ! Large */
@media (max-width: 1400px) {
html {
font-size: 25px;
}
}
/* ! Medium */
@media (max-width: 768px) {
html {
font-size: 18px;
}
}
/* ! Small */
@media (max-width: 450px) {
html {
font-size: 12px;
}
}1rem verrà moltiplicato per il font-size corrispondente proporzionando la dimensione font in base alla media query.
EM: qual è il numero base da moltiplicare? L’unità è relativa alla dimensione del carattere del suo elemento padre ed è quindi relativo alla dimensione del carattere del suo genitore diretto (parent) o più vicino, quindi il numero base da moltiplicare è il font-size dell’elemento padre; mentre abbiamo visto come REM è relativo solo alla dimensione carattere di root. EM dà la possibilità di controllare un’area specifica:
h1 { font-size: 1.5em }Questa regola significa che la dimensione carattere (font-size) del selettore h1 sarà del 50% superiore alla dimensione dell’elemento padre dell’elemento h1.
Se da un lato le unità di misura scalabili come REM e EM sono meno immediate da usare rispetto ai pixel, dall’altro lato consentono una gestione dei rapporti di proporzione migliore. Una ulteriore modalità per gestire le dimensione in base alla grandezza disponibile sul device sono le unità cosiddette viewport che lavorano proporzionalmente alla larghezza (VW) e all’altezza della finestra (VH). Il funzionamento riprende le logiche delle unità percentuali, se si specifica 10vw equivale ad uno spazio occupato che corrisponde al 10% dell’asse orizzontale della finestra.
.container{
width: 10vw;
height: 300px;
}Anche VH ha lo stesso comportamento ma lavoro sull’asse verticale, quindi sulla altezza, se si specifica 100vh equivale ad uno spazio occupato che equivale al 100%.
.container{
width: 300px;
height: 100vh;
}