PIXEL VS. EM

Se fino ad ora abbiamo considerato i pixel l'unità di misura nel web, dobbiamo ricrederci, o meglio, evolverci. Ormai creare siti web responsive che adattino il loro layout al dispositivo in cui si visualizza, non è più un optional: che sia un monitor da 15 pollici o un tablet, il sito web deve essere facilmente consultabile.

Ogni titolo, ogni immagine, ogni riquadro, ha delle dimensioni ben precise, misurate in pixel, ma se il sito viene visitato in diversi monitor, anche queste dimensioni devono cambiare, adattandosi. Per questo motivo è stato inventato l'em, una nuova unità di misura flessibile, basata su proporzioni e non su pixel, così da scalare ogni elemento in modo proporzionale.

1em equivale alla grandezza del font ereditato. Se la grandezza del font di un <div> è 12px 1em in quel <div> sarà di 12px. Se la grandezza del font in quel <div> diventerà 20px, 1em nello stesso <div> sarà di 20px.

A renderci la vita semplice, esiste la webapp PIXEM, che trasforma automaticamente tutto il nostro codice CSS, o singolarmente le misure che vogliamo, da px a em.

[via]