CSS Osnove

EM

EM (em) je relativna mera za dimenzionisanje koju treba primenjivati na tekst. Zašto?

Ako veličinu p taga definišemo u CSS-u kao 1em, tačnije

p {font-size:1em;}

onda će tekst paragrafa, zavisno od podrazumevane vrednosti podešene u pretraživaču taj tekst prikazati kao podrazumevanu vrednost u pikselima. Kako to izgleda u praksi?

Vi ste podesili vrednosti za veličinu teksta kompletnog dokumenta na 1em, tačnije

body {font-size:1em;}

Kako će se taj tekst videti u različitim situacijama?

Ako se strana prikazuje na desktopu u pretraživaču u kome je podrazumevana vrednost za h1 => 40px, za h2=>32px a p=16px, onda će i tekst unutar korespodentnih tagova biti prikazan u tim veličinama. Ako na primer istu stranicu gledate u pretraživaču smart telefona, gde su vrednosti podešene drugačije, na primer h1=>14px, h2=>12px a p=>9px, onda će tekst biti prikazan u toj veličini.

Koristeći em kao jedinicu pomažete da tekst bude pravilno prikazan na svim veličinama uredjaja i rezolucija. U slučaju da želite da razlika izmedju veličine teksta unutar h1 elementa i p elementa bude manje drastična od podrazumevane, u CSS ćete staviti pravilo kojim ćete ili relativno smanjiti veličinu teksta u h1

h1{font-size:0.8em;}

p{font-size:1em;}

ili relativno povećati veličinu teksta za p:

h1{font-size:1em;}

p{font-size:1.25em;}

EM ustvari predstavlja relativnu veličinu u odnosu na definisanu veličinu fonta svog roditelja, u ovom slučaju one vrednosti koju pretraživač ima definisanu za h1 ili p tag.

Slicno ponašanje ima i definisanje veličine teksta u procentima (%) pa ga ovde nećemo pominjati, sem što treba reći da 1em odgovara veličini od 100%.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn