Convertor PX în REM

Cum folosești convertorul PX în REM

1. Setează Dimensiunea fontului rădăcină (px). Este 16 în toate browserele importante, dacă foaia ta de stil nu o schimbă. Butoanele de sub câmp comută pe 16 px, 10 px (trucul html { font-size: 62.5%; }) sau 18 px.
2. Dacă lucrezi cu em, setează Dimensiunea fontului părinte pentru em (px): dimensiunea calculată a fontului elementului care îl conține pe cel pe care îl stilizezi.
3. La Convertește o valoare, scrie în Pixeli (px), REM sau EM. Celelalte două câmpuri se actualizează pe măsură ce scrii, iar rândul de dedesubt arată împărțirea folosită.
4. Tabel de conversie în masă listează dimensiuni uzuale. Înlocuiește Valori în pixeli cu propriile tokenuri de design (scara de spațiere, scara tipografică…) și folosește Copiază tabelul ca să lipești rezultatul într-o foaie de calcul sau într-un document de design.
5. Ca să migrezi cod existent, lipește-l în CSS de convertit, alege opțiunile și apasă Convertește px în rem. Încarcă un exemplu arată o mică foaie de stil. Copiază CSS convertit cu butonul Copiază.

Formulele

• rem = px ÷ dimensiunea fontului rădăcină. Cu valoarea implicită de 16 px, 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ dimensiunea fontului părinte. Într-un titlu de 20 px, 10px = 0,5em.
• px = rem × dimensiunea fontului rădăcină, iar px = em × dimensiunea fontului părinte.

rem sau em: pe care îl folosești?

rem („root em”) se referă întotdeauna la dimensiunea fontului elementului html, deci 1.5rem înseamnă același lucru peste tot în pagină. Este alegerea cea mai sigură pentru dimensiuni de font, spațieri, lățimi maxime și goluri de aranjare.

em se referă la dimensiunea fontului elementului însuși (pentru font-size, a părintelui). Se compune: o listă cu 0,9em, imbricată de trei ori, ajunge la 0,9 × 0,9 × 0,9 = 73 % din bază. Asta face ca em să fie util pentru lucruri care trebuie să se scaleze cu propriul text (padding-ul unui buton, dimensiunea unei pictograme de lângă o etichetă) și riscant pentru tipografia globală.

De ce contează rem pentru accesibilitate

Mulți oameni măresc dimensiunea implicită a fontului din setările browserului (de exemplu de la 16 la 20 sau 24 px), în loc să mărească fiecare pagină. Dimensiunile scrise în px ignoră această preferință; cele în rem sau em o urmează. Folosirea rem pentru text și spațiere lasă întreaga aranjare să crească după alegerea cititorului, ceea ce ajută la criteriul de succes WCAG 2.2 1.4.4 (redimensionarea textului până la 200 %).

Din același motiv, evită să setezi html { font-size: 16px; } în px: folosește un procent (100% sau 62.5% dacă vrei 1rem = 10px), astfel încât setarea utilizatorului să se aplice în continuare.

Ce schimbă convertorul CSS

Înlocuiește numerele urmate de px din declarații cu valoarea împărțită la dimensiunea fontului rădăcină. Nu atinge niciodată comentariile, șirurile de caractere sau valorile url().

• Păstrează grosimea bordurilor și a contururilor în px: border, border-*-width, outline, outline-offset și column-rule rămân în px, ca liniile subțiri să rămână clare. border-radius este totuși convertit.
• Păstrează valorile de 1px: orice valoare între −1px și 1px rămâne așa cum este.
• Convertește interogările media în em (bază 16px): în condițiile @media, rem și em se referă întotdeauna la dimensiunea inițială a fontului din browser, niciodată la regula ta html, deci instrumentul împarte la 16 și scrie em acolo, indiferent de dimensiunea ta rădăcină. Când este debifată, interogările media își păstrează px.