CSS Osnove

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

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