Home » Xhtml, Css e Ajax » Xhtml e css » Ok vorrei usare gli em al posto dei pixel, ma come si calcolano?
Ok vorrei usare gli em al posto dei pixel, ma come si calcolano?
Usare gli em al posto dell’unità in pixel aiuta nel ridimensionamento delle pagine e ne favorisce l’accessibilità agli ipovedenti.
Molti di voi però, alle prime armi con l’unità di misura em si troverà in difficoltà nel capire a che misura corrispondono i vecchi pixel che usavate.
E allora ecco un bel Em Calculator che ci aiuta a capire che misure usare nel nostro css. Utile vero?
Amazon-Box creato da Giuseppe Frattura
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
21 Commenti
Per approfondire l’argomento c’è un articolo molto interessante scritto da Jon Tan a riguardo http://jontangerine.com/log/it/l-incredibile-em-e-i-layout-elastici-con-i-css/ tradotto in italiano da me
Grazie Nicola! Prezioso e benvenuto!
Bell’articolo Nicola, molto completo ed esauriente. Il tool per la conversione px/em funziona correttamente e potrebbe essere di grande aiuto ma suggerisco sempre di farsi i conti da soli per avere un quadro più generale del layout.
Ormai è tanto tempo che uso gli em che non so più a che unità corrispondevano in pixel.
Comunque dato che i siti son sempre un progetto a se, l’unica unità sicura che uso è quella per il testo impostata a .8em
molto utile
infatti io uso sempre i pixel e so che dovrò cambiare assolutamente. questo tool mi sarà molto utile!
io ho sempre usato il caro buon vecchio metodo:
)
nel body esplicito font-size:10px;
di conseguenze le misure relative agli em sono calcolati in base a 10!
Le dimensioni variano in funzione del browser utilizzato, tanto che devo impostare la regola !important per avere la stessa grandezza con firefox ed explorer.
Aborro gli important
@hor848: Perché aborri gli important?
E’ solo un mio vezzo.
Prefersico sbattermi in soluzioni alternative della struttura del css per giorni piuttosto che usare gli imporant!
mi sembra + pulito! ma ripeto è un mio vezzo..anche se spesso risulta utile perchè riflettedno di + sul css che sto creando scopro sempre soluzioni nuove!
Beh, alla fine si tratta solo di duplicare la regola nello stesso css oppure di crearne uno apposito per IE.
Grazie della segnalazione, ho sempre usato i pixel, forse al’inizio mi era più facile da capire venendo dalla grafica stampata dove non esiste il concetto di ridimensionabile.
Ultimamente però mi sono avvicinata al layout liquido e ad em e percentuali, ma ancora tante cose mi sfuggono, tipo a volte mi incasino con l’ereditarietà e con le dimensioni delle immagini.
2 domande, visto che siamo in tema:
anche le immagini nei css, tipo il logo, posso renderle ridimensionabili?
Il box model hack di IE come funziona con em e %?
difficilmente creo un css solo per IE:
Messo nei preferiti, preziosissima come sempre laura!
di niente StefanoV!
A che pro rendere un logo ridimensionabile?
Se ridimensioni un’immagine perderà di definizione. Al limite imposti tramite css le dimensioni del div che la contiene, se occorre.
ha ragione daniele, dopo l’immagine si “spampana” come amo dire io.
per il model hack c’è da fare bene attenzione a non usare unità dimisure miste. se usi sempre le % non sbagli
In effetti si avete ragione solo che a volte capita che si ridimensiona tutto e il logo resta lì piccolino…
Per il box model hack a volte capita di mettere misure miste, tipo ho un layout in % ma il padding in em, che casino!
…Ne approfitto solo per segnalare emastic (http://code.google.com/p/emastic/), un css framework molto promettente, che si basa appunto sugli em, e non solo…
grazie Fabrizio!!!
[...] Un’alternativa è quella proposta da italianwebdesign, con un tool che permette di convertire i pixel in em. [...]