Pretvarač PX u REM

Kako koristiti pretvarač PX u REM

1. Postavi Veličina korijenskog fonta (px). U svim glavnim preglednicima ona iznosi 16 osim ako je tvoj stilski list ne promijeni. Dugmad ispod polja prebacuju na 16 px, 10 px (trik html { font-size: 62.5%; }) ili 18 px.
2. Ako radiš s em, postavi Veličina roditeljskog fonta za em (px): izračunatu veličinu fonta elementa koji sadrži onaj koji stiliziraš.
3. U dijelu Pretvori vrijednost upiši u Pikseli (px), REM ili EM. Druga dva polja se ažuriraju dok upisuješ, a red ispod prikazuje korišteno dijeljenje.
4. Tabela za masovnu pretvorbu navodi uobičajene veličine. Zamijeni Vrijednosti u pikselima vlastitim dizajn tokenima (skala razmaka, skala tipografije…) i koristi Kopiraj tabelu da rezultat zalijepiš u tabelu ili dokument za dizajn.
5. Da migriraš postojeći kôd, zalijepi ga u CSS za pretvorbu, odaberi opcije i klikni Pretvori px u rem. Učitaj primjer prikazuje mali stilski list. Kopiraj Pretvoreni CSS dugmetom Kopiraj.

Pretvorba se u potpunosti izvodi u tvom pregledniku. Ništa što zalijepiš ne šalje se na server.

Formule

• rem = px ÷ veličina korijenskog fonta. Uz zadanih 16 px, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ veličina roditeljskog fonta. Unutar naslova od 20 px, 10px = 0,5em.
• px = rem × veličina korijenskog fonta, a px = em × veličina roditeljskog fonta.

rem ili em: šta koristiti?

rem („root em“) uvijek se odnosi na veličinu fonta elementa html, pa 1.5rem znači isto svugdje na stranici. To je najsigurniji izbor za veličine fontova, razmake, maksimalne širine i razmake rasporeda.

em se odnosi na veličinu fonta samog elementa (za font-size, roditeljskog). On se kumulira: lista od 0,9em ugniježđ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 s vlastitim tekstom (padding dugmeta, veličina ikone uz oznaku), a rizičan za globalnu tipografiju.

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

Mnogi ljudi povećavaju zadanu veličinu fonta u postavkama preglednika (na primjer sa 16 na 20 ili 24 px) umjesto da zumiraju svaku stranicu. Veličine zapisane u px ignorišu tu postavku; veličine u rem ili em je poštuju. Korištenje rem za tekst i razmake omogućava da cijeli raspored raste prema izboru čitaoca, što pomaže kod WCAG 2.2 kriterija uspjeha 1.4.4 (promjena veličine teksta do 200 %).

Iz istog razloga izbjegavaj postavljanje html { font-size: 16px; } u px: koristi postotak (100%, ili 62.5% ako želiš 1rem = 10px) da korisnikova postavka i dalje važi.

Šta CSS pretvarač mijenja

Zamjenjuje brojeve iza kojih stoji px u deklaracijama vrijednošću podijeljenom veličinom korijenskog fonta. Nikad ne dira komentare, tekstualne nizove ni vrijednosti url().

• Zadrži širine okvira i obruba 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 vrijednosti od 1px: svaka vrijednost između −1px i 1px ostaje kakva jest.
• Pretvori media upite u em (baza 16px): u uslovima @media rem i em se uvijek odnose na početnu veličinu fonta preglednika, nikad na tvoje pravilo html, pa alat dijeli sa 16 i tamo piše em, bez obzira na tvoju korijensku veličinu. Kad je isključeno, media upiti zadržavaju px.