PX į REM keitiklis

Kaip naudotis PX į REM keitikliu

1. Nustatyk Šakninis šrifto dydis (px). Visose pagrindinėse naršyklėse jis yra 16, nebent tavo stilių lentelė jį pakeičia. Mygtukai po lauku perjungia į 16 px, 10 px (html { font-size: 62.5%; } triukas) arba 18 px.
2. Jei dirbi su em, nustatyk Tėvinio elemento šrifto dydis em (px): elemento, kuriame yra stilizuojamas elementas, apskaičiuotą šrifto dydį.
3. Skiltyje Konvertuoti reikšmę įrašyk Pikseliai (px), REM arba EM. Kiti du laukeliai atsinaujina, kai tik rašai, o eilutė žemiau parodo naudotą dalybą.
4. Masinio konvertavimo lentelė išvardija dažnus dydžius. Pakeisk Pikselių reikšmės savo dizaino žetonais (tarpų skale, tipografijos skale…) ir naudok Kopijuoti lentelę, kad rezultatą įklijuotum į skaičiuoklę ar dizaino dokumentą.
5. Jei nori perkelti esamą kodą, įklijuok jį į Konvertuotinas CSS, pasirink parinktis ir spustelėk Konvertuoti px į rem. Įkelti pavyzdį parodo nedidelę stilių lentelę. Mygtuku Kopijuoti nukopijuok Konvertuotas CSS.

Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.

Formulės

• rem = px ÷ šakninis šrifto dydis. Su numatytuoju 16 px, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ tėvinio elemento šrifto dydis. 20 px antraštės viduje 10px = 0,5em.
• px = rem × šakninis šrifto dydis, o px = em × tėvinio elemento šrifto dydis.

rem ar em: kurį naudoti?

rem („root em“) visada nurodo html elemento šrifto dydį, todėl 1.5rem visur puslapyje reiškia tą patį. Tai saugiausias pasirinkimas šrifto dydžiams, tarpams, didžiausiam pločiui ir maketo tarpams.

em nurodo paties elemento šrifto dydį (savybei font-size – tėvinio). Jis kaupiasi: sąrašas, kurio dydis 0,9em, įdėtas tris kartus, baigiasi ties 0,9 × 0,9 × 0,9 = 73 % bazės. Dėl to em patogus tam, kas turi keistis kartu su savo tekstu (mygtuko vidiniam tarpui, piktogramos šalia užrašo dydžiui) ir rizikingas bendrai tipografijai.

Kodėl rem svarbus prieinamumui

Daugelis žmonių padidina numatytąjį šrifto dydį naršyklės nustatymuose (pavyzdžiui, nuo 16 iki 20 ar 24 px), užuot didinę kiekvieną puslapį. px užrašyti dydžiai šios nuostatos nepaiso; rem ar em dydžiai ją seka. Naudojant rem tekstui ir tarpams, visas maketas auga pagal skaitytojo pasirinkimą, o tai padeda įgyvendinti WCAG 2.2 sėkmės kriterijų 1.4.4 (teksto dydžio keitimas iki 200 %).

Dėl tos pačios priežasties venk nustatyti html { font-size: 16px; } px: naudok procentą (100% arba 62.5%, jei nori, kad 1rem = 10px), kad naudotojo nustatymas vis tiek galiotų.

Ką keičia CSS keitiklis

Jis pakeičia skaičius su px deklaracijose reikšme, padalyta iš šakninio šrifto dydžio. Jis niekada neliečia komentarų, eilučių ar url() reikšmių.

• Palikti rėmelių ir kontūrų storį px: border, border-*-width, outline, outline-offset ir column-rule lieka px, kad plonos linijos išliktų ryškios. border-radius vis tiek konvertuojamas.
• Palikti 1px reikšmes: bet kuri reikšmė tarp −1px ir 1px lieka tokia, kokia yra.
• Media užklausas konvertuoti į em (16px bazė): @media sąlygose rem ir em visada nurodo naršyklės pradinį šrifto dydį, o ne tavo html taisyklę, todėl įrankis dalija iš 16 ir ten rašo em, koks bebūtų tavo šakninis dydis. Kai nepažymėta, media užklausos išlaiko px.