Pretvarač PX u REM

Kako koristiti pretvarač PX u REM

1. Postavi Korijensku veličinu fonta (px). U svakom većem pregledniku iznosi 16 osim ako je tvoja stilska datoteka ne promijeni. Gumbi ispod polja prebacuju na 16 px, 10 px (trik html { font-size: 62.5%; }) ili 18 px.
2. Ako radiš s em jedinicom, postavi Veličinu fonta roditelja za em (px): izračunatu veličinu fonta elementa koji sadrži onaj koji oblikuješ.
3. Pod Pretvori vrijednost upiši u Pikseli (px), REM ili EM. Ostala dva polja ažuriraju se dok tipkaš, a redak ispod prikazuje korišteno dijeljenje.
4. Tablica skupne pretvorbe navodi uobičajene veličine. Zamijeni Vrijednosti u pikselima vlastitim dizajnerskim tokenima (ljestvica razmaka, ljestvica pisma…) i pomoću Kopiraj tablicu zalijepi rezultat u proračunsku tablicu ili dizajnerski dokument.
5. Za migraciju postojećeg koda zalijepi ga u CSS za pretvorbu, odaberi opcije i klikni Pretvori px u rem. Učitaj primjer prikazuje malu stilsku datoteku. Kopiraj Pretvoreni CSS gumbom Kopiraj.

Pretvorba se u cijelosti odvija u tvom pregledniku. Ništa što zalijepiš ne šalje se na poslužitelj.

Formule

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

rem ili em: što odabrati?

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

em se odnosi na veličinu fonta samog elementa (za font-size na veličinu roditelja). Zbraja se kroz ugniježđivanje: popis od 0.9em ugniježđen triput završava na 0,9 × 0,9 × 0,9 = 73 % osnove. Zato je em zgodan za stvari koje se trebaju skalirati s vlastitim tekstom (padding gumba, veličina ikone pokraj oznake), a riskantan za globalnu tipografiju.

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

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

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

Što CSS pretvarač mijenja

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

• Zadrži širine obruba 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 vrijednosti od 1px: svaka vrijednost između −1px i 1px ostaje kakva jest.
• Pretvori media queryje u em (osnova 16px): u uvjetima @media rem i em uvijek se 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 queryji zadržavaju px.