Home » Web Development » jQuery » Come convertire in jquery gli em in pixel

Come convertire in jquery gli em in pixel

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInBuffer this page

Vediamo la differenza tra em e rem in css

Negli utlimi anni il mobile friendly sta prendendo sempre più piede nel mondo del web design, complice anche il fatto che sempre più utenti navigano sul web utilizzando dei dispositivi mobile e che Google abbia dichiarato che dallo scorso aprile il mobile friendly è un fattore di ranking.

Il responsive design è diventato praticamente lo standard per moltissimi siti web,anche perchè di fatto grazie ai design responsivi riusciamo a risolvere diversi problemi di accessibilità dei siti web: un sito responsivo, per definizione, si adatterà al dispositivo e al browser dell’utente. Per cui se l’utente avrà un browser con impostazioni particolari, come nel caso di supporti accessibili per la navigazione da parte di persone con problemi visivi, grazie al responsive design il nostro sito dovrebbe essere in grado di adattarsi, questo per la gioia di molti web designer e web developer in giro per il mondo.

Ironia a parte, sulla carta è tutto molto semplice e molto bello, ma poi nella realtà ci sono moltissimi casi in cui i web developer si dovranno spremere le meningi per permettere ai siti di adattarsi completamente alle impostazioni dei singoli browser. E una delle problematiche più comuni sarà quella di riuscire a calcolare correttamente dimensioni e margini dei diversi elementi della pagina.

La conversione da em a pixel e viceversa

Abbiamo già parlato della differenza tra em, rem e px, e abbiamo già capito come e quando usare queste unità di misura nei nostri fogli di stile. Tuttavia però può capitare spesso di dover tradurre una di queste unità di misure in un’altra utilizzando degli script. Ad esempio può capitarci di dover tradurre gli em in px per alcune operazioni matematiche. In questi casi, come spesso accade, ci viene in aiuto il jQuery con la sua funzione .css(). Ma vediamo come:

function em(input) {
    var emSize = parseFloat($("body").css("font-size"));
    return (emSize * input);
}

Nell’esempio qui sopra ho creato una funzione javascript molto semplice che, dato in input un numero in em, ci restituisce il valore corrispettivo in px.

La parte interessante di questa funzione è certamente questa:

var emSize = parseFloat($("body").css("font-size"));

In questa riga ho utilizzato il .css() di jQuery sull’elemento body della nostra pagina. Grazie alla proprietà font-size ho così ottenuto il valore di un singolo em in px, cioè quella che è l’impostazione di base settata nel browser che sta caricando la pagina.

Dopo di che basterà moltiplicare che quel valore per il numero di em ricevuto in input e il gioco sarà fatto.

La funzione parseFloat viene utilizzata per tradurre la stringa ritornata dal .css() in numero.

La conversione da pixel a em

Ovviamente è anche possibile convertire i pixel in em utilizzando la funzione inversa:

function px(input) {
    var emSize = parseFloat($("body").css("font-size"));
    return (input / emSize);
}
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInBuffer this page

Resta sempre aggiornato

Stai tranquillo! Non invio E-mail di Spam e non faccio decine di invi ogni settimana. Ti invierò di tanto in tanto un messaggio per tenerti aggiornato sulle novità e sui nuovi articoli!
Email
Secure and Spam free...