Unità CSS
CSS ha diverse unità diverse per esprimere una lunghezza.
Molte proprietà CSS prendono "length" valori, come la larghezza, il margine, padding, font-size, border-width, etc.
Lunghezza è un numero seguito da una unità di lunghezza, come 10px, 2em, etc.
Una spaziatura non può apparire tra il numero e l'unità. Tuttavia, se il valore è 0, l'unità può essere omesso.
Per alcune proprietà CSS, lunghezze negativi sono consentiti.
Ci sono due tipi di unità di lunghezza: relativi e assoluti.
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente l'unità di lunghezza.
| Unità lunghezza | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27,0 | 9.0 | 1.0 | 7.0 | 20,0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20,0 | 9.0 | 19,0 | 6.0 | 20,0 |
| vmin | 20,0 | 9,0 * | 19,0 | 6.0 | 20,0 |
| vmax | 26.0 | Non supportato | 19,0 | Non supportato | 20,0 |
Note: Internet Explorer 9 supporta Vmin con il nome non standard: vm.
lunghezze relative
unità di lunghezza relativa specificano una lunghezza relativa ad un'altra proprietà di lunghezza. unità di lunghezza relativa bilance migliore tra i diversi mezzi di rendering.
| Unità | Descrizione |
|---|---|
| em | Rispetto al font-size dell'elemento (2em means 2 times the size of the current font) Provalo |
| ex | Rispetto al x-altezza del carattere corrente (rarely used) Provalo |
| ch | Rispetto alla larghezza della "0" (zero) |
| rem | Rispetto al font-size dell'elemento radice |
| vw | Rispetto al 1% della larghezza della finestra * Provalo |
| vh | Rispetto al 1% dell'altezza della finestra * Provalo |
| vmin | Rispetto al 1% di finestra del * dimensione più piccola Provalo |
| vmax | Rispetto al 1% di finestra del * dimensione più grande Provalo |
| % |
Tip: EM e REM unità sono pratici nella creazione di layout perfettamente scalabile!
* Finestra = le dimensioni della finestra del browser. Se la finestra è 50 centimetri di larghezza, 1vw = 0,5 cm.
Absolute Lunghezze
Le unità di lunghezza assolute sono fissi e una lunghezza espressi in qualsiasi di questi comparire esattamente quel formato.
unità di lunghezza assolute non sono raccomandati per l'uso su schermo, perché le dimensioni dello schermo variano così tanto. Tuttavia, possono essere usate se il mezzo di uscita è noto, ad esempio per il layout di stampa.
| Unità | Descrizione |
|---|---|
| cm | centimetri Provalo |
| mm | millimetri Provalo |
| in | pollici (1in = 96px = 2.54cm) Provalo |
| px * | pixel (1px = 1/96th of 1in) Provalo |
| pt | punti (1pt = 1/72 of 1in) Provalo |
| pc | pica (1pc = 12 pt) Provalo |
* Pixel (px) sono relative al dispositivo di visualizzazione. Per i dispositivi a bassa-dpi, 1px è un pixel dispositivo (dot) del display. Per le stampanti e schermi ad alta risoluzione 1px implica multipli pixel del dispositivo.