Pretvornik px v rem

Kako uporabljati pretvornik px v rem

1. Nastavi Osnovna velikost pisave (px). V vseh večjih brskalnikih je 16, razen če jo tvoja slogovna datoteka spremeni. Gumbi pod poljem preklopijo na 16 px, 10 px (trik html { font-size: 62.5%; }) ali 18 px.
2. Če delaš z em, nastavi Velikost pisave nadrejenega elementa za em (px): izračunano velikost pisave elementa, ki vsebuje tistega, ki ga oblikuješ.
3. Pod Pretvori vrednost vpiši vrednost v Slikovne pike (px), REM ali EM. Drugi dve polji se posodabljata med tipkanjem, vrstica pod njimi pa prikazuje uporabljeno deljenje.
4. Tabela množične pretvorbe našteje pogoste velikosti. Vrednosti v slikovnih pikah zamenjaj s svojimi oblikovalskimi žetoni (lestvica razmikov, tipografska lestvica …) in s Kopiraj tabelo prilepi rezultat v preglednico ali oblikovalski dokument.
5. Za selitev obstoječe kode jo prilepi v CSS za pretvorbo, izberi možnosti in klikni Pretvori px v rem. Naloži primer prikaže majhno slogovno datoteko. Pretvorjeni CSS kopiraš z gumbom Kopiraj.

Orodje deluje v tvojem brskalniku. Nič, kar vneseš, se ne pošlje na strežnik.

Formule

• rem = px ÷ osnovna velikost pisave. S privzetimi 16 px je 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ velikost pisave nadrejenega elementa. Znotraj naslova s 20 px je 10px = 0,5em.
• px = rem × osnovna velikost pisave in px = em × velikost pisave nadrejenega elementa.

rem ali em: kaj uporabiti?

rem (»root em«) se vedno nanaša na velikost pisave elementa html, zato 1.5rem povsod na strani pomeni isto. To je najvarnejša izbira za velikosti pisav, razmike, največje širine in vrzeli v postavitvi.

em se nanaša na velikost pisave samega elementa (pri font-size nadrejenega). Se kopiči: seznam z 0,9em, gnezden trikrat, se konča pri 0,9 × 0,9 × 0,9 = 73 % osnove. Zato je em priročen za stvari, ki naj se skalirajo s svojim besedilom (odmik gumba, velikost ikone ob oznaki), in tvegan za globalno tipografijo.

Zakaj je rem pomemben za dostopnost

Mnogi ljudje v nastavitvah brskalnika povečajo privzeto velikost pisave (na primer s 16 na 20 ali 24 px), namesto da bi povečevali vsako stran. Velikosti v px to nastavitev prezrejo; velikosti v rem ali em ji sledijo. Če za besedilo in razmike uporabljaš rem, celotna postavitev raste z izbiro bralca, kar pomaga pri merilu uspešnosti WCAG 2.2 1.4.4 (spreminjanje velikosti besedila do 200 %).

Iz istega razloga se izogibaj nastavitvi html { font-size: 16px; } v px: uporabi odstotek (100 % ali 62.5%, če želiš 1rem = 10px), da nastavitev uporabnika še vedno velja.

Kaj spremeni pretvornik CSS

Števila, ki jim sledi px, v deklaracijah zamenja z vrednostjo, deljeno z osnovno velikostjo pisave. Nikoli se ne dotakne komentarjev, nizov ali vrednosti url().

• Širine obrob in obrisov obdrži v px: border, border-*-width, outline, outline-offset in column-rule ostanejo v px, tako da tanke črte ostanejo ostre. border-radius se še vedno pretvori.
• Vrednosti 1px obdrži: vsaka vrednost med −1px in 1px ostane, kot je.
• Medijske poizvedbe pretvori v em (osnova 16px): v pogojih @media se rem in em vedno nanašata na začetno velikost pisave brskalnika, nikoli na tvoje pravilo html, zato orodje deli s 16 in tam zapiše em, ne glede na tvojo osnovo. Ko možnost ni obkljukana, medijske poizvedbe ostanejo v px.