HTML e CSS Tutorial: Utilizzare gli em al posto dei pixel

• Tweet

• Tweet

Continua la rubrica Html e CSS Tutorial, dove oggi andremo a vedere come è possibile utilizzare l’unità di misura em, al posto dei pixel, in modo semplice, senza dover fare calcoli che ci farebbero perdere solo tempo.

Utilizzare gli em porta principalmente 2 vantaggi: l’em è una misura relativa e quindi permette di adattare i contenuti a vari tipi di media e permette una maggiore accessibilità del sito agli utenti ipovedenti che hanno bisogno di ingrandire molto il carattere, senza compromettere la struttura della pagina.

Il “problema”  è che 1 em non corrisponde a 1 pixel, ma a 16 pixel Di conseguenza se volessi realizzare un titolo grande 20pixel, dovrei calcolare quanto viene in em.

Non sarebbe più comodo esprimere esprimere le misure direttamente in em?

Tutto quello che dovrai fare sarà semplicente aggiungere questa proprietà nel tag body, all’interno del foglio di stile CSS, in questo modo:

body {font-size: 62.5%;}

In questo modo otterrai che 10px corrispondono a 1em; quindi 18px corrisponderanno a 1.8em,  22px a 2.2em e così via.

Un’alternativa è quella proposta da italianwebdesign, con un tool che permette di convertire i pixel in em.

Conoscevi questo trucchetto? Ne conosci di simili che vuoi condividere?