Veličine u CSS-u

  • Autor objave:
  • Kategorija objave:CSS
  • Vrijeme čitanja:2 mins read

Apsolutne jedinice

Apsolutne jedinice su fiksne (uvijek su iste) pa nisu najbolji izbor za korištenje na ekranima, s obzirom da se veličine ekrana jako razlikuju. Njih je najbolje koristiti kad je izlazni medij poznat, npr. kod ispisa.

  • px

Relativne jedinice

Relativne jedinice određuju svoju veličinu u odnosu na neku drugu – npr. na veličinu fonta nadređenog elementa ili veličinu okvira za prikaz (viewport). One se bolje skaliraju između različitih medija za prikaz.

  • % – relativna u odnosu na parent element
    npr. za html tag odredimo početnu vrijedost veličine fonta i dalje veličine definiramo u postocima u odnosu na tu vrijednost
  • em – relativna u odnosu na parent element
    2em = 2 puta veličina parent elementa
  • rem (root em) – relativna u odnosu na root element
    1rem je veličina fonta html elementa, koji za većinu preglednika ima zadanu vrijednost od 16px.)
    Ako za html tag odredimo neku početnu vrijedost veličine fonta sve daljnje veličine definiramo u postocima u odnosu na tu vrijednost.

em vs. rem

Razlika između rem jedinica i em jedinica je u tome što su em jedinice relativne prema veličini (npr. fonta) vlastitog elementa, a ne prema korijenskom (root) elementu. Kada imamo puno kaskada (puno ugnježdenih elemenata) stvari se mogu lako oteti kontroli.

Glavni problem s korištenjem rem jedinica za veličinu fonta je taj što je te vrijednosti donekle teško koristiti. Slijede primjer nekih uobičajenih veličina fonta izraženih u rem jedinicama, pod pretpostavkom da je osnovna veličina 16 px:

  • 10px = 0,625 rem
  • 12px = 0,75 rem
  • 14px = 0,875 rem
  • 16px = 1rem (baza)
  • 18px = 1,125 rem
  • 20px = 1,25 rem
  • 24 px = 1,5 rem
  • 30 px = 1,875 rem
  • 32px = 2rem

Kao što vidimo, ove vrijednosti nisu baš prikladne za izračune. Iz tog razloga Snook (Jonathan Snook – jedan od pionira korištenja rem jedinica) se poslužio trikom pod nazivom “62,5%” (to se već koristilo i kod em jedinica).

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

px > em / rem kalkulatori

Ako je npr. veličina fonta definirana za body tag 16px, onda je 150% ili 1.5em 24px (1.5*16)

https://www.w3schools.com/tags/ref_pxtoemconversion.asp

još linkova

Oznake: , , ,