Mezzo di un modulo relativo, come EM è un ottimo modo per mantenere il ritmo verticale di una pagina web quando un utente ridimensiona il testo nel proprio browser. Costantemente portata per una calcolatrice per calcolare il valore corretto EM da utilizzare ogni volta che è necessario è anche un ottimo modo di guidare se stessi pazzo.
Diciamo che avete un H3 che è 24 pixel. Non importa come il font-size è impostato (pixel, EMS, percentuali, ecc.) È possibile verificare l'effettiva font-size in pixel con Firebug selezionando "Mostra computerizzata Style" nel menu Opzioni nell'angolo superiore destro del CSS / pannello di stile durante la visualizzazione in modalità HTML.
Hai controllato l'comp design e misurata esattamente 9 pixel del margine inferiore sotto l'H3 fino a quando l 'elemento successivo. Naturalmente è possibile impostare il margine inferiore della H3 a 9 pixel e andare avanti. Ma questo non scala quando un utente urti la loro dimensione del testo nel browser e il vostro ritmo verticale si sgretolerà come l'H3 cresce in dimensioni, ma mantiene lo stesso 9 pixel di margine inferiore.
La formula per il calcolo del moltiplicatore EM è:
dimensioni desiderate pixel / dimensioni attuali pixel = moltiplicatore
Così, per esempio la H3: 9 / 24 = 0,375
Io uso il EmChart tutto il tempo in cui la conversione di composizioni di design in HTML / CSS i modelli - che è praticamente tutto il giorno tutti i giorni. Lo trovo molto utile per calcolare i margini inferiore, line-altezze (che sono senza unità, ma la formula si applica ancora), i margini superiore, e top / padding inferiore tra le altre cose. E 'anche molto utile per tenere nidificato parente font-dimensioni dritto.
Come ho già detto, non importa quanto il tuo attuale font-size è impostato. Quindi questo lavoro per voi indipendentemente da ciò che font-size o di unità è (o non è) impostato l'elemento HTML, BODY, o qualsiasi altro elemento. Hai solo bisogno di conoscere le dimensioni in pixel effettivi dell'elemento corrente si sta lavorando.