Con i CSS3 possiamo specificare il valore desiderato, delle dimensioni di un elemento, come width, height, ecc, e, più in generale, per tutte le proprietà che richiedano una lunghezza, usando diverse unità di misura.
Le unità di misura possono essere distinte in relative (per esempio se riferita ad un valore precedentemente espresso o di un altro elemento) e assolute (ad esempio nel caso di una lunghezza espressa in centimetri).
Unità di misura relative
- %: rispetto alle dimensioni dell'elemento contenitore (parent)
- em: rispetto alle dimensioni del font dell'elemento
- ex: rispetto a x-height, ovvero all'altezza delle lettere minuscole
- vw: rispetto alla larghezza dell'area di visualizzazione (viewport); la larghezza totale è pari a 100vw
- rem: rispetto alla dimensione del font dell'elemento principale
- vm: rispetto al valore più piccolo tra altezza e larghezza dell'area di visualizzazione
- ch: rispetto alla larghezza del carattere "0"
Unità di misura assolute
- mm: misura in millimetri
- cm: misura in centimetri
- in: inches (pollici); 1in = 2,54cm
- pt: points; 1pt = 1/72in
- pc: picas; 1pc = 12pt
- px: pixels; 1px = 1/96in
Una nota particolare riguarda il caso delle misure espresse in pixel. L'ultima specifica del W3C definisce infatti px come unità assoluta, fissandone il valore in base alla risoluzione standard di 96 dpi ma solo per preservare la retrocompatibilità; in realtà pixel dovrebbe essere considerata un'unità relativa in quanto dipende dalle caratteristiche fisiche dello schermo.
0 commenti:
Posta un commento