CSS unità
Quando si specificano i valori numerici o di lunghezza per le proprietà CSS, come width o font-size avete una scelta di unità differenti. I 3 più utilizzati sono i pixel, i valori relativi e percentuali.
Pixels
I pixel sono i minuscoli puntini che compongono il vostro schermo del computer e sono l'unità più preciso si può utilizzare per questo mezzo. Se si imposta una larghezza di 100 pixel sarà visualizzato esattamente così, né più né meno. Per impostare i valori in pixel è sufficiente aggiungere un diritto px dopo il valore.
CSS unità di pixel
Relativi valori
I valori relativi sono spesso utilizzati per font-size , Anche se può essere utilizzato per qualsiasi altra proprietà numeriche, troppo. Essi sono relativi al l'elemento corrente e sono fissati aggiungendo una em. 1em utilizza sempre il valore corrente rimane invariato, 2em utilizza il doppio e 0.5em utilizza la metà di esso (tecnicamente em significa rispetto alla larghezza del carattere minuscolo m nella corrente font).
CSS unità di valore relativo
p {font-size:2em}
Sopra codice imposta la font-size a 13 pixel per l'elemento del corpo. Gli elementi punto all'interno del corpo utilizzare un valore relativo di 2em, raddoppiando così il valore di 26 pixel.
Se usiamo 1.9em invece, il valore punto si tradurrà in 24,7 pixel. Perché schermo di un computer può visualizzare solo pixel tutto il web browser tenterà di arrotondare il valore di pixel a 24 o 25 pixel, che a volte può causare le incoerenze tra i browser.
Percentuali
Percentuali di lavoro più o meno allo stesso modo i valori relativi. 100% prende il valore corrente rimane invariato, 200% raddoppia, e così via. Percentuali sono fissati aggiungendo un%.
Unità CSS percentuale
p {font-size:200%}
Zero
Quando un valore è impostato a zero non c'è stato bisogno di una unità.
CSS valore zero
Altre unità
Ci sono alcune unità più raramente utilizzato come pc (pica), cm (centimetri), mm (millimetri), in (pollici) e pt (punti).
Usage Guidelines
1. Relativi valori per i font
Un sito web dovrebbe essere flessibile e ridimensionabile, compresi i caratteri (tenendo premuto il tasto Ctrl e muovendo la rotellina del mouse). Alcune vecchie versioni di Internet Explorer si rifiutano di ridimensionare i caratteri, se si specifica il font-size in pixel. Utilizzare un valore relativo, invece. 76% per la <body> font e em per tutti gli altri caratteri è una tecnica comunemente utilizzata per ottenere i caratteri coerente in tutti i browser.
2. Pixels solo se necessario
La regola generale è quella di utilizzare i valori relativi e percentuali ove possibile, al fine di garantire un layout flessibile in tutti i media. Anche se i pixel sono ok, se hai bisogno di posizionare le cose con estrema precisione sullo schermo.