Dimenzionisanje elemenata

Dimenzionisanje (px,tp,em,rem, %, in) – font-size

Pikseli (px) predstavljaju apsolutne vrednosti i pixeli definisani u CSS-u jednaki su pixel-ima na ekranu monitora.

Šta je piksel?

Piksel je jedinica površine koja se ispisuje na ekranu monitora. Maksimalna rezolucija nekog monitora ustvari predstavlja najmanju površinu koju je monitor u stanju precizno da ispiše.

U slučaju korišćenja piksela, postiže se najbolja kontrola medjusobnog odnosa i položaja elemenata, poznatija kao pixel-perfect. Problem sa pixelima dolazi do izražaja kada se sadržaj web strane gleda na monitorima različitih rezolucija pa na jednom monitoru tekst čak postane nečitljiv a na drugom pak, postane prevelik. Kada se CSS-om dimenzionišu elementi web strane bez navodjenja mere, podrazumevana mera je pixel. Ako pogledamo većinu pretraživača, podrazumevana veličina teksta, tj taga <p> ili <span> iznosi 16px.

Primer:

body {font-size:16px;}

znači da će podrazumevana vrednost za sav tekst biti 16px. U odnosu na nju ali i na zahtevani dizajn, treba specificirati veličinu i za ostale elemente, najčešće za elemente h1, h2 i p

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

Zašto px nije dobar izbor? Svaki pretraživač, kako na desktopu tako i tablet uredjaju ili smart telefonu ima definisanu neku veličinu teksta za pojedine tekstualne tagove (h1-h6, p, span, body, itd.) Ukoliko mi na primer zakucamo veličinu fonta za paragraph na 16px (podrazumevana vrednost na desktop uredjajima i velikim ekranima) onda dolazimo u problem kada se ta stranica prikazuje na uredjaju kao što je na primer pametni telefon. Pretraživač na tom telefonu takodje ima definisane vrednosti za h1, h2, p, itd. ali na neku nižu vrednost. Ukoliko CSS-om podesimo da p uvek ima 16px, taj parametar će pregaziti podrazumevanu vrednost na smart telefonu i biće prikazan kao neprikladno velik. Iz tog razloga, bolje je koristiti relativne veličine kao što su em ili %.

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%.

REM

Sve popularnija jedinica postaje rem koja se ne obazire na podrazumevane vrednosti za odredjene tagove već je relativna u odnosu na root element, u većini slučajeva html tag. Definiše se tako da root element procentualno povećate ili smanjite a onda u odnosu na njega definišete veličinu teksta svih ostalih tekstualnih tagova.

U slučaju da pretraživač ima definisanu vrednost za html element u vrednosti od 16px, a da želimo da bazna veličina fonta bude 10px, prvo ćemo procentualno smanjiti taj font na 10px korišćenjem font-size:62.5% pravila za html, a onda u odnosu na njega smanjivati ili povećavati veličinu teksta pojedinačnih tagova. Ako pogledate primer ispod, videćete da je font-size prvo definisan u pikselima a potom u rem jedinici. Ovo je zbog toga što pretraživači koji ne razumeju rem kao jedinicu imaju vrednost koju će usvojiti.

html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Pointi (pt), inch (in) i ostale apsolutne jedinice nisu preporučljive za web dizajn!

Da uprostimo, dok se ne budete lako snalazili u ovoj problematici: za slike koristite piksel a za tekst em ili rem jedinice.

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