Što radi pretvarač px u rem i em
Alat pretvara vrijednosti u pikselima (px) u rem i em jedinice, i obrnuto. Vrijednost možete unijeti u bilo koju od tri jedinice, a preostale dvije automatski se izračunavaju i prikazuju u istom trenutku. Uz to, možete postaviti vlastitu osnovnu (root) veličinu fonta i em kontekstualnu veličinu fonta, tako da pretvorbe odgovaraju točno Vašem dizajnu, a ne nekoj pretpostavljenoj vrijednosti.
Razlika između px, rem i em jedinica
Piksel (px) predstavlja fiksnu duljinu koja se ne mijenja bez obzira na ostale postavke. Rem jedinica mjeri se u odnosu na osnovnu (root) veličinu fonta stranice - kad je ta osnova 16px, 1rem odgovara 16px. Em jedinica mjeri se u odnosu na veličinu fonta elementa u kojem se koristi, a ne nužno na osnovni element stranice. Kad tipografiju i razmake odredite u rem jedinicama, sve se skalira kada čitatelj u pregledniku promijeni zadanu veličinu fonta.
Osnovna (root) veličina fonta i njezin utjecaj na rem
Polje Osnovna (root) veličina fonta (px) predstavlja bazu prema kojoj se izračunavaju sve rem vrijednosti. Zadana vrijednost iznosi 16px, a mora biti broj veći od 0. Kad promijenite ovo polje, sve rem vrijednosti odmah se preračunavaju, pa možete provjeriti kako Vaš dizajn izgleda ako projekt koristi drugačiju osnovnu veličinu fonta od uobičajene.
Primjer: ako je osnovna veličina fonta 16px, a unesena vrijednost 24px, pretvarač prikazuje 1.5rem (24 podijeljeno sa 16). Promijenite li osnovnu veličinu fonta na 20px, ista vrijednost od 24px postaje 1.2rem (24 podijeljeno sa 20), jer se rem uvijek računa u odnosu na trenutnu osnovnu veličinu.
em kontekstualna veličina fonta
Za em jedinicu potrebna je zasebna referentna vrijednost, jer se em ne odnosi na osnovni font stranice nego na veličinu fonta samog elementa u kojem se koristi - a taj element ne mora imati isti font kao root. Polje em kontekstualna veličina fonta (px) omogućuje da unesete upravo tu veličinu; zadana vrijednost također iznosi 16px, a mora biti broj veći od 0. Kad se veličina fonta elementa podudara s osnovnim fontom stranice, kontekst postavite jednako osnovnoj veličini; u suprotnom ga prilagodite stvarnoj veličini fonta tog elementa kako bi em vrijednost bila točna.
Primjer: ako je em kontekstualna veličina fonta postavljena na 20px, a unesena vrijednost 30px, pretvarač prikazuje 1.5em (30 podijeljeno sa 20).
Kako koristiti pretvarač
U polje Vrijednosti unesite broj u px, rem ili em - preostale dvije jedinice ažuriraju se dok tipkate. Prije nego unesete vrijednost, 16px odgovara 1rem i 1em, jer su osnovna i em kontekstualna veličina fonta na početku postavljene na zadanih 16px. Alat prihvaća i negativne vrijednosti u pikselima, što je korisno primjerice kod negativnih margina.
Uobičajene pretvorbe i poruke pogrešaka
Osim izravne pretvorbe, alat prikazuje i tablicu Uobičajene pretvorbe px → rem (baza 16px) - popis uobičajenih vrijednosti u pikselima pretvorenih u rem uz pretpostavljenu osnovu od 16px, neovisno o tome koju ste osnovnu veličinu trenutno postavili u poljima iznad.
Ako u polje Vrijednosti unesete nešto što nije valjan broj, prikazuje se poruka "Unesite broj za pretvorbu." Ako je unos u polju Osnovna (root) veličina fonta (px) neispravan, odnosno nije broj veći od 0, prikazuje se poruka "Osnovna (root) veličina fonta mora biti broj veći od 0." Isto vrijedi i za em kontekstualnu veličinu fonta (px): neispravan unos prikazuje poruku "em kontekstualna veličina fonta mora biti broj veći od 0."
Kome je namijenjen ovaj alat i zaštita privatnosti
Pretvarač je koristan onima kojima je potrebno pretvoriti fiksne vrijednosti u pikselima u relativne rem ili em jedinice za responzivan dizajn, onima koji žele razumjeti kako različite osnovne veličine fonta utječu na rem vrijednosti, onima kojima je potrebno izračunati em vrijednosti na temelju veličine fonta određenog elementa, te onima koji žele osigurati da se veličine ispravno skaliraju kada čitatelj promijeni zadanu veličinu fonta.
Svaka se pretvorba izvodi u Vašem pregledniku. Ništa što upišete ne šalje se na BroBroGo.
Često postavljana pitanja
Koja je razlika između px, rem i em jedinica?
Jedinica px je fiksna duljina. Jedinica rem mjeri se u odnosu na osnovnu (root) veličinu fonta stranice, pa pri bazi od 16px, 1rem iznosi 16px. Jedinica em mjeri se u odnosu na veličinu fonta elementa u kojem se nalazi. Određivanje veličine tipografije i razmaka u rem jedinicama omogućuje skaliranje svega kada čitatelj promijeni zadanu veličinu fonta u pregledniku.
Zašto postoji zasebna em kontekstualna veličina?
Jedinica em odnosi se na veličinu fonta vlastitog elementa, koji nije uvijek osnovni (root) element. Postavite em kontekst na veličinu fonta tog elementa kako biste ispravno očitali em, te ga držite jednakim osnovnom elementu kada se podudaraju.
Što ako moja osnovna veličina fonta nije 16px?
Promijenite polje osnovne (root) veličine fonta kako bi odgovaralo Vašem CSS-u i svaka rem vrijednost odmah će se ažurirati. Brza tablica u nastavku koristan je vodič za uobičajenu bazu od 16px od koje kreće većina web-mjesta.