Cum se folosește
- Setează dimensiunea fontului rădăcină dacă site-ul tău o modifică (de exemplu html { font-size: 62.5% } rezultă 10px).
- Tastează o valoare în oricare dintre câmpuri pentru a converti px în rem sau rem în px. Comută pe em dacă dimensionezi raportat la un părinte.
- Folosește tabelul pentru căutări rapide sau lipește un fragment CSS pentru a converti toate lungimile în px dintr-o dată și copiază rezultatul.
Cum funcționează
rem = px ÷ dimensiunea fontului rădăcinii. Cu rădăcina implicită de 16px, 24px înseamnă 1.5rem, iar 14px înseamnă 0.875rem. em folosește aceeași formulă, dar cu dimensiunea fontului elementului părinte, motiv pentru care valorile em imbricate se înmulțesc; rem evită acest lucru deoarece se raportează întotdeauna la rădăcină.
Folosirea rem pentru dimensiunile fontului și spațiere permite scalarea textului atunci când cineva mărește dimensiunea implicită a fontului din setările browserului, ceea ce ajută persoanele cu vedere slabă. Valorile sunt rotunjite la patru zecimale.
Convertorul de fragmente schimbă numerele urmate de px. Lasă comentariile, url(…) și șirurile citate neschimbate, păstrează 1px dacă optați pentru asta (marginile subțiri ar trebui să rămână de obicei 1px), scrie 0px ca 0 și, implicit, nu modifică condițiile @media și @container, deoarece în interogările media rem și em se referă întotdeauna la dimensiunea inițială a fontului browserului, indiferent de dimensiunea setată a fontului rădăcinii. Nu înțelege semantica calc() dincolo de înlocuirea numerelor px din interior, ceea ce este totuși corect, deoarece fiecare lungime este convertită separat.
Exemple
Dimensiune implicită a rădăcinii
Cu o rădăcină de 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Trucul cu 62.5%
Dacă în CSS se setează html { font-size: 62.5% }, rădăcina este 10px, deci 14px = 1.4rem și 24px = 2.4rem. Setați câmpul pentru dimensiunea fontului rădăcinii la 10 pentru a corespunde.
Conversia unei componente
padding: 24px 16px; border: 1px solid #ddd; devine padding: 1.5rem 1rem; border: 1px solid #ddd; cu opțiunea „Păstrați valorile de 1px” activată.
Întrebări frecvente
Ar trebui să folosesc rem sau em?
Folosiți rem pentru majoritatea dimensiunilor fontului, spațiere și layout, deoarece este previzibil peste tot. Folosiți em atunci când un element trebuie să se scaleze odată cu dimensiunea textului propriei componente, cum ar fi padding-ul dintr-un buton.
De ce să nu convertiți interogările media în rem?
Puteți, dar într-o interogare media 1rem este întotdeauna egal cu dimensiunea implicită a fontului browserului (de obicei 16px), nu cu dimensiunea fontului html. De aceea, convertorul le omite implicit; dezactivați opțiunea dacă împărțiți totuși la 16.
Este rem mai bun pentru accesibilitate decât px?
Pentru dimensiunile fontului, da: rem respectă setarea implicită a fontului utilizatorului, în timp ce dimensiunile în px o ignoră. Zoom-ul browserului funcționează cu ambele unități.
Confidențialitate
Conversiile și fragmentul CSS sunt procesate în browserul tău și nu sunt trimise nicăieri.