Pretvarač PX u REM

Kako se koristi pretvarač PX u REM

1. Podesi Osnovna veličina fonta (px). U svim glavnim pregledačima iznosi 16, osim ako je tvoj stilski fajl ne promeni. Dugmad ispod polja prebacuju na 16 px, 10 px (trik html { font-size: 62.5%; }) ili 18 px.
2. Ako radiš sa em jedinicom, podesi Veličina fonta roditelja za em (px): izračunatu veličinu fonta elementa koji sadrži element koji stilizuješ.
3. U odeljku Pretvori vrednost upiši u Pikseli (px), REM ili EM. Ostala dva polja se ažuriraju dok kucaš, a red ispod prikazuje korišćeno deljenje.
4. Tabela za masovno pretvaranje navodi uobičajene veličine. Zameni Vrednosti u pikselima sopstvenim dizajnerskim tokenima (skala razmaka, skala tipografije…) i upotrebi Kopiraj tabelu da nalepiš rezultat u tabelu (spreadsheet) ili dizajnerski dokument.
5. Da migriraš postojeći kod, nalepi ga u CSS za pretvaranje, izaberi opcije i klikni Pretvori px u rem. Učitaj primer prikazuje mali stilski fajl. Kopiraj Pretvoreni CSS dugmetom Kopiraj.

Pretvaranje se u celini izvršava u tvom pregledaču. Ništa što nalepiš ne šalje se na server.

Formule

• rem = px ÷ osnovna veličina fonta. Sa podrazumevanih 16 px, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ veličina fonta roditelja. Unutar naslova od 20 px, 10px = 0,5em.
• px = rem × osnovna veličina fonta, a px = em × veličina fonta roditelja.

rem ili em: koji da koristim?

rem („root em“) uvek se odnosi na veličinu fonta elementa html, pa 1.5rem znači isto na celoj stranici. To je najbezbedniji izbor za veličine fonta, razmake, maksimalne širine i razmake u rasporedu.

em se odnosi na veličinu fonta samog elementa (za font-size, roditeljskog). Naslaže se: lista od 0,9em ugnežđena tri puta završava na 0,9 × 0,9 × 0,9 = 73 % osnove. Zato je em zgodan za stvari koje treba da se skaliraju sa sopstvenim tekstom (padding dugmeta, veličina ikone pored natpisa), a rizičan za globalnu tipografiju.

Zašto je rem važan za pristupačnost

Mnogi ljudi u podešavanjima pregledača povećavaju podrazumevanu veličinu fonta (na primer sa 16 na 20 ili 24 px) umesto da uvećavaju svaku stranicu. Veličine zapisane u px ignorišu to podešavanje, a veličine u rem ili em ga poštuju. Korišćenje rem za tekst i razmake omogućava da ceo raspored raste prema izboru čitaoca, što pomaže kriterijumu uspeha WCAG 2.2 1.4.4 (promena veličine teksta do 200 %).

Iz istog razloga izbegavaj da postavljaš html { font-size: 16px; } u px: upotrebi procenat (100%, ili 62.5% ako želiš 1rem = 10px) da se podešavanje korisnika i dalje primenjuje.

Šta CSS pretvarač menja

Zamenjuje brojeve iza kojih stoji px u deklaracijama vrednošću podeljenom osnovnom veličinom fonta. Nikada ne dira komentare, niske ni vrednosti url().

• Zadrži debljine ivica i obrisa u px: border, border-*-width, outline, outline-offset i column-rule ostaju u px, pa tanke linije ostaju oštre. border-radius se i dalje pretvara.
• Zadrži vrednosti od 1px: svaka vrednost između −1px i 1px ostaje kakva jeste.
• Pretvori media upite u em (osnova 16px): u uslovima @media rem i em se uvek odnose na početnu veličinu fonta pregledača, nikada na tvoje pravilo html, pa alat deli sa 16 i tu piše em, bez obzira na tvoju osnovu. Kad je isključeno, media upiti zadržavaju px.